cssclearfix

"Best clearfix ever?"

I saw this rather different method for clearfix here: http://www.marcwatts.com.au/blog/best-clearfix-ever/

It proposes adding the following CSS code which automates clearfix and does not require you to add a 'clearfix' or similar class to the elements you want to clear.

/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

/* our ie CSS file */
article { zoom:1; }
aside { zoom:1; }
div { zoom:1; }
footer { zoom:1; }
form { zoom:1; }
header { zoom:1; }
nav { zoom:1; }
section { zoom:1; }
ul { zoom:1; }

Are there any disadvantages to this method? Could this end up clearfix'ing elements that you may not necessarily want clearfix'ed? Or are the rules such that this will account for any situation?

Solution

  • I think that's a bad idea. Are you really going to trust somebody who seemingly forgot to do this:

    article, aside, div, footer, form, header, nav, section, ul { zoom:1; }

    Clearing floats is not a complicated thing to get right.

    It should be handled on a case-by-case basis, not sledge-hammered onto "every" element.

    Doing that will come back to bite you in some way, I'm sure of it.

    For one thing, I agree with @Guffa's answer.

    An edge case reason against it concerns IE7: http://www.satzansatz.de/cssd/onhavinglayout.html

    zoom: 1 is a common method to provide something known as hasLayout to elements. Applying hasLayout to an element fixes certain kinds of rendering problems, but it can also cause other problems. A quote from the linked document:

    Don't give layout to all. Poison in that concentration, having layout is not the cure, it changes the rendering fundamentally.

    I personally like to use the overflow: hidden method to contain floats. When that doesn't work, then I use clearfix.

    You should use the version of clearfix from http://html5boilerplate.com/:

    .clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}