CSS Float

The CSS Float Property is used to specify that an element should be placed along the left or right side of its container, where text, inline elements and other element allowing to wrap around it. It is a positioning property and can be used with layouts and images.

We can set this property to right, left, none (default).

The float Property

The float property is used to formatting content and positioning property.

The float property consist following values:

Right – This property specifies that the element (text & Images) floats right of its container.
Left - This property specifies that the element (text & Images) floats left of its container.
Inherit - It is used to inherits the float value from its parent element.
None - The element is not floated and it occurs in the text where it will be displayed. This is a default value in float property.

Let's take an example of float-right:

<!DOCTYPE html>
<html>
<head> Float Right </head>
<style>
.img-right{width:200px;height:150px;margin-left:15px;float: right;}
</style>
<body>
<p> The image will float to the right. </p>
<p><img src="/images/css/cssfloat.jpg" alt="float-right-img" class="img-right">
Image float to the right, Image float to the right, Image float to the right, Image float to the right, Image float to the right,
Image float to the right,Image float to the right,Image float to the right,Image float to the right,Image float to the right,Image float to the
 right,Image float to the right,Image float to the right ,Image float to the right ,Image float to the right,Image float to the right ,Image
 float to the right ,Image float to the right ,Image float to the right ,Image float to the right ,Image float to the right,Image float to the
 right ,Image float to the right ,Image float to the right ,Image float to the right .</p>
</body>
</html>

Output :

The image will float to the right.

float-right-img Image float to the right, Image float to the right, Image float to the right, Image float to the right, Image float to the right, Image float to the right,Image float to the right,Image float to the right,Image float to the right,Image float to the right,Image float to the right,Image float to the right,Image float to the right ,Image float to the right ,Image float to the right,Image float to the right ,Image float to the right ,Image float to the right ,Image float to the right ,Image float to the right ,Image float to the right,Image float to the right ,Image float to the right ,Image float to the right ,Image float to the right.

Let's take an example of float-left:

<!DOCTYPE html>
<html>
<head> Float Left </head>
<style>
.img-left{width:200px;height:150px; margin-right:15px;float: left;}
</style>
<body>
<p>The image will float to the left. </p>
<p><img src="/images/css/cssfloat.jpg" alt=" float-left-img" class="img-left">
Image float to the left, Image float to the left, Image float to the left, Image float to the left, Image float to the left,
Image float to the left,Image float to the left,Image float to the left,Image float to the left,Image float to the left,Image float to the
 left,Image float to the left,Image float to the left ,Image float to the left ,Image float to the left,Image float to the left ,Image
 float to the left ,Image float to the left ,Image float to the left ,Image float to the left ,Image float to the left,Image float to the
 left ,Image float to the left ,Image float to the left ,Image float to the left.</p>
</body>
</html>

Output :

The image will float to the left.

float-left-img Image float to the left, Image float to the left, Image float to the left, Image float to the left, Image float to the left, Image float to the left,Image float to the left,Image float to the left,Image float to the left,Image float to the left,Image float to the left,Image float to the left,Image float to the left ,Image float to the left ,Image float to the left,Image float to the left ,Image float to the left ,Image float to the left ,Image float to the left ,Image float to the left ,Image float to the left,Image float to the left ,Image float to the left ,Image float to the left ,Image float to the left.

Let's take an example of no-float:

<!DOCTYPE html>
<html>
<head> No Float</head>
<style>
.img-nofloat{width:200px;height:150px;float: none;}
</style>
<body>
<p>Image will be displayed just where it occurs .</p>
<p><img src="..\css float\1.jpg" alt="float-none" class="img-nofloat">
Image displayed float none, Image displayed float none, Image displayed float none, Image displayed float none, Image displayed float none,
Image displayed float none,Image displayed float none,Image displayed float none,Image displayed float none,Image displayed float none,Image float to the
 left,Image displayed float none,Image displayed float none ,Image displayed float none ,Image displayed float none,Image displayed float none ,Image
 displayed float none ,Image displayed float none ,Image displayed float none ,Image displayed float none ,Image displayed float none,Image float to the
 left ,Image displayed float none ,Image displayed float none ,Image displayed float none.</p>
</body>
</html>

Output :

Image will be displayed just where it occurs .

float-none Image displayed float none, Image displayed float none, Image displayed float none, Image displayed float none, Image displayed float none, Image displayed float none,Image displayed float none,Image displayed float none,Image displayed float none,Image displayed float none,Image float to the left,Image displayed float none,Image displayed float none ,Image displayed float none ,Image displayed float none,Image displayed float none ,Image displayed float none ,Image displayed float none ,Image displayed float none ,Image displayed float none ,Image displayed float none,Image float to the left ,Image displayed float none ,Image displayed float none ,Image displayed float none.

CSS Clear

The CSS clear property is used to specify that an element can be next to floating elements that precede it and can float beside the cleared element or must be moved down (cleared) below them. We can set this property to right, left, both, none (default).

The Clear property can have one of the following values:

right- This property specifies that the element (text & Images) has not allowed to float on the right side.
left - This property specifies that the element (text & Images) has not allowed to float on the left side.
inherit - This property specifies that the element (text & Images) has inherits the clear value of its parent.
none - This property specifies that the element (text & Images) has allowed to float on both sides. This is a default property.

Let’s take an example of CSS Clear:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
}
.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2"> div2 - Notice that div1 is before div2 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>
<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</body>
</html>

output:

Without clear

div1

div2 - Notice that div1 is before div2 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.

With clear

div3

div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads