CSS Float

Whether a box should float or not is specified by the CSS float property. 

Floating Elements with CSS

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:

How Elements Float

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;
}

Try With Example

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;
}

Try With Example

Turning off Float Using Clear Property

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;
}

Try With Example

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.