clear
Makes an element start below the floated elements before it.
Syntax
clear: both;Values
| Parameter | Type | Description |
|---|---|---|
| left | keyword | Below elements floated left. |
| right | keyword | Below elements floated right. |
| both | keyword | Below all floated elements. |
| none | keyword | Wraps as usual (the default). |
Examples
A paragraph that does not wrap around the picture:
<img src="/media/photo-200x200.jpg" alt="" width="70" style="float: left; margin-right: 8px;">
<p>Wraps around the picture.</p>
<p style="clear: both; background: lightyellow;">This paragraph starts below the picture because of clear: both.</p>Notes
clear is only needed together with float. In a layout without floats it does nothing.
See also
- float — Pushes an element to the left or right edge so that text flows around it.
In the tutorial
- Floats — How float works, wrapping text around an image, clear and display: flow-root, and why columns are built with flexbox and grid today.