CSS Float

The CSS float property is a positioning property. It is used to push an element to the left or right, allowing other element to wrap around it. It is generally used with images and layouts.

Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down.

  • A floated element can display at extreme left or extreme right.
  • The elements after the floating element will flow around it.
  • The elements before the floating element will not be affected.
  • If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right.
ValueDescription
noneIt specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value.
leftIt is used to float the element to the left.
rightIt is used to float the element to the right.
initialIt sets the property to its initial value.
inheritIt is used to inherit this property from its parent element.
Input:-

Index.html
	
<body> 
	  <div> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</div>
</body>

Style.css
img {  
    float: right;  
}  

Output:-


How Elements Float

Elements are floated in such a way that it is taken out of normal flow and then shifted to left or right as far as possible in the space available of the containing element.

We can control other elements that are normally flowing  around the floated items unless they are prevented from doing so by their clear property. Elements are floated horizontally, which means that an element can only be floated left or right, not up or down.        

If several floating elements are placed adjacently, they will float next to each other if there is horizontal room. If there is not enough room for the float element, it is shifted downward until either it fits or there are no more floating elements present.

Input:-

Index.html
	
<body> 
	  <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
	 <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
	 <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
	 <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
  <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
</body>

Style.css
.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}

Output:-


Turning off Float Using Clear Property

The clear property specifies which sides of an element’s box other floating elements are not allowed. Elements that comes after the floating element will flow around it.

Input:-

Index.html
	
<body> 
	  <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
	 <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
	 <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
	 <div class="thumbnail clear">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
  <div class="thumbnail">
         Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
</body>

Style.css
.thumbnail {
    float: left;
    width: 125px;
    margin: 10px;
}
.clear{
	  clear: left;
}

Output:-

Note:- This clear property can clear an element only from floated boxes within the same block. It doesn’t clear the element from floated child boxes within the element itself.