Best Clearfix for All Browsers (IE6+)

Gone are the days of putting your clearfix as a separate div, this is the simplest CSS clearfix that works in all browsers (including IE6).

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

How to Use It

Say we have some HTML that looks like this:

<div id="container">
    <div class="floated">content</div>
    <div class="floated">content</div>
    <div class="floated">content</div>
</div>

The problem is easy to see – the #container isn’t wrapping around the floated elements. Why? Floated elements are removed from the normal flow of the document, so the #container doesn’t know they are there. To fix this, we can add in our .group clearfix to the #container.

<div class="group" id="container">
    <div class="floated">content</div>
    <div class="floated">content</div>
    <div class="floated">content</div>
</div>

And voilà, our #container now wraps around our floated elements.

Thanks to Nicholas Gallagher for this great clearfix.

• css