“Best clearfix ever?”

Question

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 clea

Answer 1

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;
}