The very latest clearfix reloaded
Published on (01-30-2016).
Over 3 years ago I wrote "The very latest new new way to do “clearfix”. Before that, I had written "clearfix Reloaded + overflow:hidden Demystified" on the YUIBlog. And here I am, writing about clearfix for the third time!
My previous recommendation for modern browsers was to use:
.clearfix:after {
content:" ";
display:table;
clear:both;
}
In lieu of the Micro Clearfix hack:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
This is because dropping support for oldIE allowed us to part with both zoom:1
and :before
as their only use was for cross-browsers support.
In oldIE, zoom:1
triggers something known as hasLayout
which creates—more or less—a block-formatting-context. The result of this is that, in oldIE, boxes styled with any "clearfix" method containing zoom:1
prevent the margin of their first and last child from collapsing; the same way a block-formatting context does.
In other words, the top margin of the first child of the box, as well as the bottom margin of the last child of the box, are contained inside the said box.
Nicolas Gallagher chose to replace display:block
with display:table
for a couple of reasons:
to reduce the amount of code and ensure visual consistency with IE 6/7
to ensure visual consistency with other float containment techniques that create a new block formatting context, e.g.,
overflow:hidden
As mentioned earlier, we do not need to ensure visual consistency with IE 6/7 anymore and as pointed out by Nicolas Breitwieser, preventing margin collapsing (to be consistent with other float containment techniques) may create more problems than it solves. That’s because sibling boxes styled with a "clearfix" method based on display:table
are separated by extra space since vertical margins do not collapse.
The following example is inspired by Nicolas Breitwieser’s pen:
<div class="left-column">
<div class="clearfix-using_display-table">
<p>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
</div>
<div class="clearfix-using_display-table">
<p>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
</div>
</div>
<div class="right-column">
<div class="clearfix-using_display-block">
<p>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
</div>
<div class="clearfix-using_display-block">
<p>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
</div>
</div>
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Margin collapsing is a feature, not a bug, and—as we can see here—it ensures a better distribution of boxes across the vertical axis.
So for this reason, I think it is better to favor display:block
instead of display:table
in "clearfix" rules.
As in:
.clearfix:after {
content:" ";
display:block;
clear:both;
}
Now, if you do not care for “old” Opera, you could as well remove the space in the content value—as suggested by @kornelski
.clearfix:after {
content:"";
display:block;
clear:both;
}
Please let me know in the comments below if I have missed anything.