Clearing Floats

Clearing Floats

In the previous episode, we saw that floated children cause their parent to collapse to zero height. This episode covers the solutions: clearing floats.

The Problem

<div class="parent" style="background: #eee; border: 2px solid #333;">
    <div style="float: left; width: 200px; height: 100px; background: #3498db;"></div>
    <div style="float: left; width: 200px; height: 100px; background: #e74c3c;"></div>
</div>
<p>This text appears RIGHT BELOW the parent, 
   overlapping with the floated children!</p>

/* The parent has 0 height because both children are floated.
   The paragraph flows up behind the floated boxes. */

Solution 1: The clear Property

The clear property forces an element to move below any floated elements:

.clear-element {
    clear: left;   /* Move below left-floated elements */
    clear: right;  /* Move below right-floated elements */
    clear: both;   /* Move below all floated elements */
}

<div class="parent">
    <div style="float: left;">Floated</div>
    <div style="float: left;">Floated</div>
    <div style="clear: both;"></div>  <!-- Clears the floats -->
</div>
<p>This text now appears correctly below the parent.</p>

Adding an empty div with clear: both works but requires extra HTML markup.

Solution 2: The Clearfix Hack (Best Practice)

The modern clearfix uses a pseudo-element — no extra HTML needed:

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

/* Apply to the parent: */
<div class="parent clearfix">
    <div style="float: left;">Floated</div>
    <div style="float: left;">Floated</div>
</div>

/* The ::after pseudo-element clears the floats,
   making the parent properly wrap its children. */

Solution 3: overflow: hidden (or auto)

.parent {
    overflow: hidden;  /* Creates a new BFC → contains floats */
}

/* or */
.parent {
    overflow: auto;
}

Setting overflow to anything other than visible creates a Block Formatting Context (BFC), which contains floated children. However, this can clip content that overflows the container.

Solution 4: display: flow-root (Modern Best)

.parent {
    display: flow-root;
}

/* This is the cleanest modern solution.
   It creates a BFC without any side effects.
   No clipping, no extra pseudo-elements. */

Clearing Methods Comparison

Method	Extra HTML?	Side Effects?	Browser Support
Empty div with clear: both	Yes ❌	None	All
Clearfix ::after	No ✅	None	All
overflow: hidden	No ✅	Clips overflow ⚠️	All
display: flow-root	No ✅	None ✅	Modern browsers

Practical Example

.article {
    display: flow-root;  /* Contains floated images */
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

.article img {
    float: left;
    width: 200px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 8px;
}

/* The article container properly wraps around 
   the floated image and the text. */

Key Takeaways

• Floated children cause parent elements to collapse
• The clearfix ::after pseudo-element is the classic, reliable solution
• overflow: hidden works but may clip content
• display: flow-root is the modern, cleanest solution
• clear: both forces an element below all floats
• Today, Flexbox and Grid have largely replaced floats for layouts