CSS Float

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.

To understand its purpose and origin, let's take a look to its print display. In the print display, image is set into the page such that text wraps around it as needed.

The float property may have one of the three values:

Value Description
left The element floats on the left side of its containing block.
right The element floats on the right side of its containing block.
none Removes the float property from an element.

How it works

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

  1. A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at extreme left or extreme right.
  2. The elements after the floating element will flow around it.
  3. The elements before the floating element will not be affected.
  4. 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.

CSS Float Properties

Property Description Values
clear The clear property is used to avoid elements after the floating elements which flow around it. left, right, both, none, inherit
float It specifies whether the box should float or not. left, right, none, inherit

The float Property

In its simplest use, the float property can be used to wrap text around images.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
img {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
}
</style>
</head>
<body>
<p>
<img src="../images/kites.jpg" alt="Flying Kites"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.
</p>
</body>
</html>
Try it with the Editor

NOTE: 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, it is shifted downward until either it fits or there are no more floating elements present.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul{
     margin: 0;
     padding: 0;
     list-style: none;
}
.thumbnail {
     float: left;
     width: 125px;
     height: 125px;
     margin: 2px;
}
</style>
</head>
<body>
<ul>
   <li class="thumbnail"><img src="../images/club.jpg" alt="Club Card"></li>
   <li class="thumbnail"><img src="../images/diamond.jpg" alt="Diamond Card"></li>
   <li class="thumbnail"><img src="../images/spade.jpg" alt="Spade Card"></li>
   <li class="thumbnail"><img src="../images/heart.jpg" alt="Heart Card"></li>
</ul>
</body>
</html>
Try it with the Editor

The clear Property

the clearproperty is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To avoid this, use the clear property.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
.clear {
	clear: left;
}
p {
  float: left;
  margin: 10px; 
  padding: 10px;
  background: #f0e68c;
}
</style>
</head>
<body>
<p>Floated to left.</p>
<p class="clear">No floated elements are allowed on left side.</p>
</body>
</html>
Try it with the Editor

Note:This 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.