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

Answer 2

Could this end up clearfix'ing elements that you may not necessarily want clearfix'ed?

Yes. I would not like every div element to be cleared.

Answer 3

I've been clearing all divs globally for the past couple of years in my projects, and it has been working great for me. In approximately 95% of the cases where I use divs, clearfix has worked like a charm when applied to a site globally. There are certainly cases where a potential issue will arise, and I end up undoing the clearfix for any problematic divs. The CSS declarations I use are:

div:after {
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
    font-size: 0;
    line-height: 0;
    content: ' ';
    visibility: hidden;
    overflow: hidden;
    }
div {
    *zoom: 1;
    }

Answer 4

In Cascade Framework, I'm using the following clearfix on all "block level" elements :

div:after {
    content: "";
    display: table;
}

div:after {
    clear: both;
}

div {
    *zoom: 1;
}

I never encountered any problems with this technique, except for minor quirks when using third party JS libraries... which can easily be fixed by "unclearfixing" the parent element.

Personally, I think clearfixed block level elements are lot more intuitive to work with and I don't really want to go back to working with floats the traditional way anymore. The only reason I see not to clearfix all block level elements by default, is because it's non-standard behavior and it might confuse the hell out of other people reading your code.

In cases where you actually want a parent of a floated element to collapse, an alternative strategy would be to use display: relative for the parent and display: absolute for the child. I haven't encountered any use case so far where this strategy isn't a suitable alternative for collapsed parents of floated elements.

Answer 5

Are there any disadvantages to this method?

One would be that it won't be enough in < IE8, since the 'after' element isn't that well supported. More about that at CSS tricks