Classic Clearfix Techniques
Clearfix solves the classic float-collapse problem: a parent that contains only floated children has zero height. Modern flexbox and grid layouts make floats almost obsolete, but every codebase still has legacy CSS where you have to fix this. This snippet shows the modern `display: flow-root` one-liner alongside the historical pseudo-element clearfix and the empty-div trick, so you know what you are reading when you open old stylesheets.
275 views
3
/* MODERN: one declaration, no markup change. display: flow-root creates a new
block formatting context, which contains floats automatically. Use this on
any parent that has floated children. Supported in every browser since 2018. */
.container {
display: flow-root;
}
/* CLASSIC pseudo-element clearfix. Still seen everywhere; works back to IE 8.
Adds an invisible block element after the parent's content that clears
floats above it, forcing the parent to grow to contain them. */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* Example: a card with two floated columns. */
.card {
border: 1px solid #ddd;
padding: 1rem;
}
.card .col-left {
float: left;
width: 60%;
}
.card .col-right {
float: right;
width: 35%;
}
/* Apply EITHER .clearfix on the parent OR display: flow-root.
Do not use both; flow-root makes the pseudo-element redundant. */
.card {
display: flow-root; /* preferred */
}Use display: flow-root for any new code. It creates a new block formatting context, which has the side effect of containing floats inside the element, and it does so in a single declaration with no extra markup. The pseudo-element .clearfix::after { content: ""; display: block; clear: both; } is the version you will recognize from countless legacy codebases, including Bootstrap 3 and earlier. Both achieve the same result; the pseudo-element variant only exists because flow-root was not interoperable until 2018. Pick one technique per project and stick to it; mixing both on the same element is harmless but redundant.
/* LEGACY: an empty <div> with clear: both inside the parent.
This works because the empty div takes up zero height itself but its
`clear: both` rule pushes the parent's bottom edge below the floats.
Reserve this for codebases that already use it; it pollutes markup with
a presentational element and screen readers may announce it as a stray
landmark in some configurations. */
.legacy-clear {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
/* Example markup that the legacy rule targets:
<div class="card">
<div class="col-left">...</div>
<div class="col-right">...</div>
<div class="legacy-clear"></div>
</div>
*/
/* MODERN: replace floats with flexbox or grid and the entire problem disappears. */
.card-modern {
display: flex;
gap: 1rem;
}
.card-modern .col-left {
flex: 0 0 60%;
}
.card-modern .col-right {
flex: 0 0 35%;
}
/* Even cleaner with grid for two unequal columns. */
.card-grid {
display: grid;
grid-template-columns: 60% 35%;
gap: 1rem;
}The empty-div technique was the original clearfix back when ::before and ::after had patchy support. It works mechanically (a zero-height block with clear: both extends the parent's height down past the floats) but adds a presentational element to your markup, which is exactly what we tried to escape by moving CSS out of HTML. The right thing to do in a modern codebase is to stop using floats for layout altogether: flexbox or grid replaces every legitimate float-based layout with cleaner code that does not need clearing. Floats still have one good use case, which is wrapping inline content like images around text in articles; that case never needs clearfix because it is the original purpose floats were designed for.