CSS float and clear

Float and clear properties belong to older CSS techniques used to align elements side by side. While flexbox and grid are more popular today, float is still important, especially for text wrapping.

How float and clear work

Float allows an element to move to the left or right of its parent content, while other content flows around it. Clear ensures that a new element does not appear next to a float but starts below it.

Property	Description
float: left \| right	The element floats left or right, and other content flows around it.
clear: left \| right \| both	Prevents the element from appearing next to a float.

Float and clear example

In the example below, one element floats left, another right, and then a clear element ensures that the next content starts below them.

With clear: both, the green box is placed below the two floating elements.

Tips for using float and clear

Float and clear can be effective for simple layouts, but in modern projects it’s better to use flexbox or grid systems.

Float is mainly ideal for wrapping images and text.
Always use clear or a clearfix solution to keep the layout stable.
Do not try to build full layouts with float, as it is hard to manage and inflexible.