“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

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.