"Best clearfix ever?"

3
votes

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?

5
cssclearfix
Not related, but do you know that you can use multiple CSS selectors for a single set of rules? No need to duplicate the CSS. Example: nav, div, header, section, ul li a, p strong {zoom:1} – Wesley Murch
um, you really should define multiple css selectors: article:after, aside:after, div:after, ... { clear:both; ... } – Mark
I know, I'm just pasting it as it was on that site. I did notice that. ;) – Jake Petroules
The link in the question is broken.Thanks if you can fix that. – Gnijuohz

5 Answers

24
votes

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

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.

2
votes
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

1
votes

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.

0
votes

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