Clearfix legacy
The ::after clearfix hack that forced containers to wrap floated children. Essential knowledge for legacy codebases — use Flexbox or Grid in new code.
Without clearfix
Container collapses — floated child escapes
With clearfix
Container wraps its floated child correctly
Quick implementation
/* Classic clearfix — for legacy float-based layouts only.
Use Flexbox or Grid in new code instead. */
.clearfix::after {
content: '';
display: table; /* table creates a block formatting context */
clear: both; /* clear all floats after this pseudo-element */
}
/* Modern alternative 1: overflow creates a BFC too */
.container {
overflow: hidden; /* or overflow: auto — both contain floats */
}
/* Modern alternative 2: display: flow-root (the clean solution) */
.container {
display: flow-root; /* creates a BFC without side effects */
}
/* Example float layout needing clearfix */
.media-object::after {
content: '';
display: table;
clear: both;
}
.media-object__image {
float: left;
margin-right: 1rem;
width: 6rem;
}
.media-object__body {
overflow: hidden; /* alternative BFC approach */
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer maintaining a legacy codebase
that uses CSS floats for layout.
Goal: Show the clearfix pattern and its modern replacements.
Include:
- The ::after clearfix (content, display: table, clear: both)
and explain why display: table is used instead of display: block
- overflow: hidden as a simpler BFC-creation alternative
- display: flow-root as the cleanest modern solution
- The media object pattern (float left image, text alongside)
implemented with clearfix AND again with flexbox for comparison
- When to actually use float today: text wrapping around images
in article/editorial content (still valid!)
Explain:
- What a Block Formatting Context (BFC) is and why it contains floats
- Why overflow: hidden has side effects (clips shadows, tooltips)
- Why display: flow-root was introduced (no side effects)
Return only the CSS and HTML with inline comments.Why the container collapses
When an element is floated, it's removed from the normal document flow. Its parent container sees it as having zero height — the container collapses to fit only its non-floated children. If all children are floated, the parent collapses to zero height entirely. The clearfix works by inserting a zero-height ::after pseudo-element after all the floated content with clear: both, forcing the container's height to extend past the floats.
display: flow-root — the modern fix
display: flow-root creates a Block Formatting Context (BFC) without any side effects. A BFC automatically contains its floated children — no clearfix needed. Unlike overflow: hidden (which clips overflow), or overflow: auto (which adds scroll bars), flow-root exists purely to create a BFC. It's supported in all modern browsers since 2017. In genuinely new code, use Flexbox or Grid — floats are only appropriate for text wrapping around images.