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.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
