How to clear floats.
The clearfix, explained.
Floated elements are removed from the normal flow — they don't push the parent's height. A parent with only floated children has height 0, so following content overlaps it, backgrounds disappear, and layout breaks. The fix is called clearfix. There are three patterns: the classic ::after clearfix, display: flow-root (modern), and overflow: auto (with side effects). This page covers each, when to use float today, and why flexbox replaced float layout.
Short answer: Use display: flow-root on the parent — it contains floats without side effects, supported in all modern browsers since 2017. Fall back to the ::after clearfix for legacy browsers. overflow: hidden works but clips content and breaks sticky. Use float only for its original purpose — wrapping text around an image — not for layout. For layout, use flexbox or grid.
✅ The problem
Floated children collapse the parent.
.parent {
background: #f5f5f5;
border: 2px solid #2965f1;
/* no clearfix, no overflow, no flow-root */
}
.child {
float: left;
width: 100px;
height: 100px;
background: #2965f1;
}
.sibling {
background: #ffd700;
padding: 1rem;
}
Visual result: ┌─────────────────────┐ ← parent border │ ┌────┐ │ (height: 0! no background) │ │ │ │ │ │ │ ← floated │ │ │ │ child │ │ └────┘ │ └─────────────────────┘ ┌─────────────────────┐ ← sibling overlaps parent │ Sibling content │ └─────────────────────┘ ❌ Parent has height: 0 (border-only visible). ❌ Parent's background doesn't paint behind the float. ❌ Sibling overlaps the parent — no vertical space. ❌ Everything after the float appears in the wrong place. Why: float takes the child out of normal flow. The parent has no in-flow content → height: 0. This is float collapse.
✅ Fix 1 — display: flow-root
The modern, side-effect-free fix.
.parent {
display: flow-root; /* ✅ contains the float */
background: #f5f5f5;
border: 2px solid #2965f1;
}
.child {
float: left;
width: 100px;
height: 100px;
background: #2965f1;
}
.sibling {
background: #ffd700;
padding: 1rem;
}
Visual result: ┌─────────────────────┐ ← parent contains the float │ ┌────┐ │ │ │ │ │ │ │ │ ← floated │ │ │ │ child │ │ └────┘ │ │ │ ← parent height = child └─────────────────────┘ ┌─────────────────────┐ ← sibling is below │ Sibling content │ └─────────────────────┘ ✅ Parent has correct height. ✅ Parent's background paints behind the float. ✅ Sibling is below the parent, not overlapping. Why: flow-root creates a block formatting context (BFC), which contains floats. No pseudo-element, no overflow clipping, no side effects. Supported in all modern browsers since 2017. This is the recommended fix.
✅ Fix 2 — the classic clearfix
For legacy code where flow-root isn't an option.
.clearfix::after {
content: '';
display: table;
clear: both;
}
/* Usage */
.parent {
background: #f5f5f5;
border: 2px solid #2965f1;
}
/* HTML: */
.child {
float: left;
width: 100px;
height: 100px;
background: #2965f1;
}
What happens:
1. ::after creates a pseudo-element as the last
child of .parent.
2. display: table makes it a block-level element
(table is chosen for legacy IE compatibility,
block works in modern browsers).
3. clear: both forces it below the floated children.
4. The pseudo-element now sits below the floats.
5. The parent's height includes the pseudo-element
(which is below the floats).
6. Parent height = float's height.
✅ Parent contains the float.
✅ No overflow clipping.
✅ No pseudo-element required on the parent —
it's generated by CSS.
⚠️ Requires the .clearfix class on the parent.
⚠️ Flow-root is cleaner — no class needed.
This was the standard pattern from 2005–2017.
Still works, still seen in legacy codebases.
New code should use flow-root.
✅ What float is actually for
Text wrapping around an image.
.article-image {
float: left;
width: 200px;
margin-right: 1rem;
margin-bottom: 0.5rem;
border-radius: 8px;
}
.article p {
/* Text flows around the image naturally */
line-height: 1.6;
}
/* ✅ The text wraps around the image.
This is what float was designed for —
magazine-style layout for text + media. */
Visual result: ┌───────────────────────────────────┐ │ ┌──────┐ Lorem ipsum dolor sit │ │ │ │ amet, consectetur... │ │ │ IMG │ adipiscing elit. Sed │ │ │ │ do eiusmod tempor... │ │ └──────┘ incididunt ut labore... │ │ │ │ Ut enim ad minim veniam, quis... │ └───────────────────────────────────┘ ✅ Text wraps around the image. ✅ No layout system needed — float does this natively. ✅ Full line width reclaimed after the float ends. This is float's original purpose — text wrapping. ⚠️ Don't use float for layout in 2026. Use flexbox or grid. Float for text-media wrapping only.
Don't use float for layout in 2026. Float was the only layout tool for a decade, but flexbox and grid replaced it. Floats cause the collapse problem, don't support vertical centering, don't handle equal-height columns naturally, and don't have gap or justify-content. If you're writing new CSS, use display: flex or display: grid for layout. Use float only for its original purpose: wrapping text around an image. This isn't stylistic — flexbox and grid are objectively better for every layout problem float was ever used for. The only reason to learn clearfix is to maintain legacy code.
⚠️ Common mistakes
The float mistakes that cost real time.
Parent collapses. Fix: display: flow-root on the parent.
Clips content, breaks sticky. Fix: flow-root.
Fragile, doesn't center vertically, no equal heights. Fix: flexbox or grid.
The ::after doesn't clear. Fix: include clear: both.
float is ignored on flex items. Fix: use flex properties.
Expecting float to center. Fix: margin: 0 auto for block centering.
Following elements overlap. Fix: clear: both or flow-root.
Text overflows the float. Fix: clear: both on the last paragraph, or overflow: auto on the container.
❓ Frequently asked
Why does my floated parent collapse?
Floated elements are removed from the normal flow — they don't push the parent's height. A parent with only floated children has height: 0 because there's no in-flow content to give it height. This is called 'float collapse.' The parent appears to have no height, so following elements overlap it, backgrounds disappear, and spacing breaks. The fix is called 'clearfix.'
What is the clearfix pattern?
The clearfix is a CSS rule that forces a parent to contain its floated children. The classic version uses a pseudo-element: .clearfix::after { content: ''; display: table; clear: both; }. The ::after pseudo-element becomes a child of the parent, and clear: both moves it below the floats. The parent then has a real last child, so its height includes the floats.
What is display: flow-root?
display: flow-root is the modern replacement for the clearfix hack. It creates a new block formatting context (BFC) on the element, which forces it to contain its floated children. No pseudo-elements needed, no overflow side effects. Supported in all modern browsers since 2017. This is the cleanest fix for float collapse.
Why not just use overflow: hidden?
overflow: hidden does contain floats — it creates a block formatting context, same as flow-root. But it has side effects: it clips content that overflows (dropdowns, box-shadows, tooltips), and it breaks position: sticky on descendants. This is why flow-root was added — it contains floats without the clipping behavior. Use flow-root when you can.
Should I still use float for layout?
No. Floats were the only layout tool for many years, but flexbox and grid replaced them for layout. Floats are still the right tool for their original purpose — wrapping text around an image. Use float for that, and use flexbox/grid for layout. If you're maintaining a legacy codebase with float layouts, clearfix is still needed.
What is clear: both?
The clear property forces an element to be positioned below any preceding floated siblings. clear: left moves it below left-floated siblings, clear: right below right-floated, clear: both below both. In the clearfix pattern, the ::after pseudo-element uses clear: both to force itself below the parent's floated children.