The Clearfix Hack: Understanding <div class='clearfix'> in Legacy CSS

In older CSS, floating elements caused their parent containers to collapse:

<div class="container">
    <div class="float">Floated content</div>
</div>

<style>
.float { float: left; }
.container { background: gray; }
</style>

The container's height becomes zero because floated elements are removed from normal document flow. The background doesn't show—there's nothing to contain.

Clearfix solves this by forcing the container to expand and contain its floated children.

The Original Problem

Floats were designed for wrapping text around images:

<img src="photo.jpg" style="float: left;">
<p>Text wraps around the floated image...</p>

But developers used floats for layout—creating columns, sidebars, grids. Floats weren't designed for this, leading to collapsed containers.

The Clearfix Solution

The modern clearfix:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Apply it to the container:

<div class="clearfix">
    <div style="float: left;">Column 1</div>
    <div style="float: right;">Column 2</div>
</div>

The container now wraps both floated divs.

How It Works

The ::after pseudo-element creates an invisible element after the container's content. Three properties make it work:

1. content: "" - Creates the pseudo-element (empty content)
2. display: table - Makes it a block-level element that spans full width
3. clear: both - Prevents floating elements on either side

The clear: both forces the pseudo-element below all floats. Since it's inside the container, the container must expand to contain it, which means containing the floats too.

Evolution of Clearfix

Original clearfix (circa 2004):

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Added a visible character, then hid it. Clunky but worked.

Micro clearfix (circa 2011):

.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}

The ::before prevents margin collapse. This became the standard.

Minimal clearfix (modern):

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Simplified version. The ::before isn't necessary in most cases.

Alternative: overflow: hidden

Before clearfix became standard, overflow: hidden was common:

.container {
    overflow: hidden;
}

This creates a block formatting context (BFC), which contains floats. But it has side effects—it clips content that extends beyond the container. Dropdowns, tooltips, and absolutely positioned elements get cut off.

Clearfix doesn't have this limitation.

When You Still See Clearfix

Legacy codebases and older CSS frameworks use clearfix extensively:

• Bootstrap 3: Included a .clearfix utility class
• Foundation 5: Used clearfix for grid rows
• Older WordPress themes: Full of clearfix classes

If you're maintaining legacy code, you'll encounter it.

Modern Alternatives

Flexbox: No floats needed:

.container {
    display: flex;
}

.column {
    flex: 1;  /* No float required */
}

Grid: Even more powerful:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

display: flow-root: Creates BFC without side effects:

.container {
    display: flow-root;  /* Contains floats, no overflow issues */
}

This is the modern equivalent of clearfix for the rare cases where you still need to contain floats.

When You Still Need Floats

Floats are still useful for their original purpose—wrapping text around images:

<img src="photo.jpg" class="float-left">
<p>Text flows around the image naturally...</p>

<style>
.float-left {
    float: left;
    margin: 0 20px 10px 0;
}
</style>

For this use case, you don't need clearfix. The text wrapping is the intended behavior.

Debugging Float Issues

If you're working with legacy float-based layouts and things look broken:

• Check if containers have clearfix applied
• Look for unclosed float contexts
• Verify widths don't exceed 100% (causes wrapping)
• Use browser DevTools to highlight float elements

Adding outline: 1px solid red temporarily shows container boundaries:

.container {
    outline: 1px solid red;
}

Migration Strategy

Replacing clearfix in legacy code:

1. Identify floated layouts
2. Replace with flexbox or grid
3. Test responsive behavior
4. Remove clearfix classes once floats are gone

For mixed codebases, keep clearfix utilities until all float layouts are migrated.

Performance

Clearfix has negligible performance impact. The pseudo-element is lightweight. The browser renders it efficiently.

Modern layout methods (flexbox, grid) aren't faster than float + clearfix. The benefit is cleaner code, not speed.

Common Mistakes

Forgetting to apply clearfix:

<!-- Container collapses -->
<div>
    <div style="float: left;">Content</div>
</div>

<!-- Fixed -->
<div class="clearfix">
    <div style="float: left;">Content</div>
</div>

Using clearfix on the floated element:

<!-- Wrong -->
<div class="clearfix" style="float: left;">Content</div>

<!-- Correct - apply to parent -->
<div class="clearfix">
    <div style="float: left;">Content</div>
</div>

Missing the ::after pseudo-element:

<!-- Incomplete -->
.clearfix {
    clear: both;  /* Does nothing without ::after */
}

<!-- Complete -->
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Documentation and Comments

When clearfix appears in code, add a comment explaining why:

<!-- Legacy grid uses floats - clearfix required -->
<div class="row clearfix">
    <div class="col">...</div>
</div>

Future maintainers will understand the context.

Further Reading

Nicolas Gallagher's micro clearfix article explains the evolution and reasoning behind the technique.

CSS-Tricks' clearfix guide provides implementation details and browser compatibility notes.

MDN's documentation on the clear property explains how clearing works mechanically.

Clearfix solved a real problem in the float-based layout era. Understanding it helps when maintaining legacy code and appreciating modern CSS.