Before Flexbox and Grid, float was the only way to achieve "multi-column side-by-side" layouts, and it left behind a whole set of companion hacks. Today we rarely use float for whole-page layouts, but the BFC (block formatting context) concept it gave rise to remains an important tool for debugging layout anomalies.
The Original Purpose of float
float was originally designed for "text wrapping around images": an element with float leaves the normal document flow and moves to the left or right, while the inline content that follows wraps around it.
img.thumb {
float: left;
margin-right: 12px;
}
Preview: text wrapping
Img
This is text wrapping around the right side of a floated image. The lines automatically avoid the area occupied by the floated element, and only return to full-width layout after passing the floated element's height — exactly the typesetting problem float was originally designed to solve.
The Height Collapse Problem
Because floated elements leave the document flow, one awkward consequence is: if a parent contains only floated children, it "cannot see" their height, and its height collapses to 0.
A BFC (Block Formatting Context) is an "independent rendering region" on the page — how boxes inside the BFC are laid out does not affect the outside; conversely, external elements cannot affect the layout inside a BFC either. Think of it as an isolated layout container.
clearfix works because it essentially triggers a BFC on the parent — the BFC wraps the height of all floated children inside it, so it no longer collapses. That is also why modern approaches prefer triggering a BFC directly instead of inserting an extra clearing pseudo-element.
How to Create a BFC
Trigger
Description
overflow: hidden / auto
The most common approach, but it also clips overflowing content
display: flow-root
The modern first choice: designed specifically to trigger a BFC, with no side effects
display: flex / grid / inline-block
Switching the display type also creates a BFC
position: absolute / fixed
Creates a BFC while leaving the document flow
/* modern clearfix: no side effects, clear semantics */.row {
display: flow-root;
}
RecommendedAs long as the goal is "wrapping the height of floated children", prefer display: flow-root — it is the value designed for exactly this, and unlike overflow: hidden it will not accidentally clip a child's shadow or dropdown menu.
Practical Uses of a BFC
Wrapping floated height: as described above, solving the parent's height collapse.
Preventing margin collapse: the vertical margins of two adjacent block-level elements merge to the larger value by default; wrapping one of them in a new BFC stops the merge.
Avoiding text wrapping around floats: trigger a BFC on an ordinary block-level box next to a floated element; it becomes an independent region that is not squeezed or wrapped by the float, giving a clean "two-column, no wrapping" layout.
Do We Still Need float Today?
At the level of whole-page layout, float has been completely replaced by Flexbox and Grid — they are more intuitive, need no clearfix, and carry none of the height-collapse baggage. But the scenario float was originally designed for — "text wrapping around images / drop caps" — remains its only irreplaceable use to this day: neither Flexbox nor Grid can make "content flow around a rectangle" work.