float
Pushes an element to the left or right edge so that text flows around it.
Syntax
float: left;Values
| Parameter | Type | Description |
|---|---|---|
| left | keyword | To the left edge, text on the right. |
| right | keyword | To the right edge, text on the left. |
| none | keyword | No floating (the default). |
Examples
Text flowing around a picture:
<img src="/media/photo-200x200.jpg" alt="" width="90" style="float: left; margin: 0 12px 4px 0;">
<p>The text flows around the picture on the right. Floats were once used to build entire layouts; today they serve their original purpose — wrapping text around images, like in a magazine article.</p>Notes
Use float only for wrapping text around something. For columns and rows, flexbox and grid are far simpler. A parent does not grow to contain its floated children — display: flow-root on the parent fixes that.
See also
- clear — Makes an element start below the floated elements before it.
- ::first-letter — Styles the first letter of a block's first line — for drop caps.
- display — Decides how an element behaves in the flow and how it lays out its content.
- shape-outside — Sets the shape that text wraps around next to a floated element — a circle, a polygon or the outline of an image.
Related recipes
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.