Float & Clear
Wrap text around elements with float.
Syntax
float: left; clear: both;The float property pushes an element to the left or right, letting inline content such as text wrap around it. It was once used for whole-page layouts, but Flexbox and Grid are now preferred for that.
The clear property stops an element from sitting next to floated elements.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer floats an image left inside an article so the paragraph text wraps naturally around it, like a magazine layout.
- A developer uses clearfix on a container whose only children are floated, preventing the container from collapsing to zero height.
- A developer replaces an old float-based grid with Flexbox and uses float: none to reset any inherited float styles from older code.
More examples
Image float with text wrap
Floats an image to the left so subsequent paragraph text wraps around its right side — the classic magazine layout.
.article-img {
float: left;
margin: 0 16px 8px 0;
width: 200px;
}Clearfix for collapsing container
The modern clearfix technique uses a ::after pseudo-element to force a parent to contain its floated children.
.clearfix::after {
content: '';
display: table;
clear: both;
}Clear below a floated sidebar
Uses clear: both on the footer to ensure it always starts below both floated sidebar and main content columns.
.sidebar { float: left; width: 240px; }
.main { float: right; width: calc(100% - 260px); }
.footer { clear: both; padding: 24px 0; }
Discussion