Before Flexbox and CSS Grid existed, float was the main tool for building entire column-based layouts. Today it survives almost exclusively for one very specific job: wrapping text around an image, exactly like in a printed magazine article.
Understanding float is still useful for reading old CSS code sometimes inherited from an older project, and for that particular text-wrapping effect that no modern property reproduces quite as simply, or as quickly to set up.
Definition
float removes an element from the normal text flow while keeping it visible on screen: the lines of text that follow it wrap around it, instead of continuing below as they normally would. The possible values are left, right, and none, the default value.
History: layout before flexbox and grid
For nearly fifteen years, float was used to line up several columns side by side, floating multiple <div> elements to the left with percentage widths that had to add up to exactly 100%. This technique worked, but stayed fragile: vertical centring was nearly impossible to achieve cleanly, widths had to land on an exact figure, and a parent's height would collapse as soon as all its children were floated. The arrival of flexbox and then CSS Grid made this use obsolete, offering tools designed from the start for layout instead of repurposed for the occasion.
Concrete example: wrapping text around an image
.illustration {
float: left;
width: 220px;
margin: 0 20px 12px 0;
}The text of the paragraph following this image wraps automatically around it, respecting the margins defined. It is this exact effect, hard to reproduce with a modern layout system, that explains why float has never fully disappeared from CSS. It is enough to write text normally right after the image in the HTML, with no extra wrapper and no special alignment property on the paragraph itself.
The trap: a parent that loses all its height
A container whose direct children are all floated no longer computes any height of its own: it visually collapses to zero pixels, even though its children remain perfectly visible on screen. The classic fix is called a clearfix, and it works by forcing the parent to account for its floated children.
.container::after {
content: "";
display: block;
clear: both;
}A shorter alternative gives the same result without a pseudo-element: setting overflow to hidden or auto on the parent also forces the browser to recalculate its height based on its floated children, at the cost of a side effect if content is meant to spill out of the box on purpose.
Frequently asked questions
Should float still be used to build a column layout?
No. Flexbox and CSS Grid do this job far better, with spacing controlled through gap, native vertical centring, and no risk of height collapse. float only keeps real value for wrapping text around an image or a callout box.
What does clear actually do?
clear stops an element from rising next to a preceding floated element: with clear: both, it drops below the last floated element, on both the left and the right. It is the property that makes the clearfix possible, by forcing the parent's pseudo-element to position itself below its floated children.
Why does my floated image spill out of its container?
Because a floated element leaves the normal flow, its parent may stop accounting for it when computing its own height, exactly the problem a clearfix fixes. Without that fix, the image still displays, but visually outside the visible boundaries of its container, with the parent's background or border stopping well before the image even though it still looks like it belongs there.