Understanding CSS Clearfix: Resolving Float-Induced Height Collapse

The clearfix technique addresses a fundamental layout issue where floated elements cause their container to collapse. Let's examine common implementation questions and misconceptions.

Why ::after Works But ::before Doesn't

This initial approach fails:

.container::before {
    content: "*";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

The clear property only controls how an element interacts with floats that appear before it in the document flow. A ::before pseudo-element renders ahead of all child content, making it unable to respond to subsequent floats. Switching to ::after solves this:

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

Simplifying with Empty Content

The content property can be empty, eanbling a more streamlined version:

.container::after {
    content: "";
    display: block;
    clear: both;
}

With empty content, height: 0 and visibility: hidden become redundant—block elements without content natural collapse to zero height.

The Block Display Requirement

Could display be inline or inline-block? No, and understanding float's original purpose explains why. Floats were designed for text wrapping around images, meaning inline elements naturally flow alongside them.

The clear property forces an element to avoid touching float boundaries. For a block element, this means moving to a new line, which expands the container's height. Inline elements would continue flowing next to floats, failing to create the necessary line break that resolves collapse.

Directional Clearing and Why Both Is Better

Consider this scenario with right-floated content:

.wrapper::after {
    content: "";
    display: block;
    clear: left;
}
.visual { float: right; }

<div class="wrapper">
    <span>Demo Text</span>
    <img src="sample.png" class="visual">
</div>

Height collapse persists because clear: left only avoids left floats, not right. The three clear values differ significantly:

• left: Avoids left-floating elements only
• right: Avoids right-floating elements only
• both: Avoids all floating elements

This demonstration clarifies:

.clear-l { clear: left; }
.clear-r { clear: right; }
.float-l { float: left; }
.float-r { float: right; }
.item {
    height: 30px; width: 30px;
    background: #7fff00;
    margin: 5px;
}

<div>
    <div class="item float-l">A</div>
    <div class="item float-r">B</div>
    <div class="item clear-l">C</div>
</div>
<div>
    <div class="item float-l">A</div>
    <div class="item float-r">B</div>
    <div class="item clear-r">C</div>
</div>

Both exapmles render identically. When floats exist on both sides, clear: left and clear: right behave the same. clear: both provides universal protection, which is why it's the standard choice.

Clarifying the Core Concept

The term "clearfix" is somewhat misleading. The technique doesn't actually remove or clear floats—it contains them. The clear property affects only the element applying it, not the floated elements. We're solving container height collapse, not altering float behavior itself.