Whether a box should float or not is specified by the CSS float property.
The elements can be floated to the left or right, but it only applies to the elements generating boxes that are not absolutely positioned. Any element following the floated element flows around the floated element on the opposite side.
The float property might have one of the three values:
Value | Description |
| left | Here, the element floats on the containing block's left side. |
| right | Here, the element floats on the containing block's right side. |
| none | For removing an element's float property. |
The floated element is removed from the regular flow and moved to the containing element's left or right side as far as possible in the available space.
Other elements normally flow around the floated elements unless a clear property prevents them from doing so. Elements can be floated only horizontally, implying that an element can only be floated either left or right and not up or down.
Example :
img {
float: left;
}
On placing several floating elements adjacently, they will float next to each other if there is horizontal space. If there is no space for the float, it is shifted downward until it fits or there are no more floating elements present.
Example :
.thumbnail {
float: left;
width: 125px;
height: 125px;
margin: 10px;
}All elements that come after the floating element will flow around it. The clear property defines on which sides of an element's box other floating elements are not allowed.
Example :
.clear {
clear: left;
}Note: You can use this property to clear an element only from floated boxes within the same block. This property will not clear the element from floated child boxes within the element itself. You can learn more about clearing float in the tutorial for CSS Alignment.