"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 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?

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, Jun 07 '11 at 23:40
um, you really should define multiple css selectors: `article:after, aside:after, div:after, ... { clear:both; ... }` — , Jun 07 '11 at 23:41
I know, I'm just pasting it as it was on that site. I did notice that. ;) — Jake Petroules, Jun 08 '11 at 02:59
The link in the question is broken.Thanks if you can fix that. — Gnijuohz, Mar 03 '12 at 04:51

score 24 · Accepted Answer · edited May 23 '17 at 12:33

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

`overflow: hidden` has the apparent effect of containing floats, but no clearance actually takes place within the container, contrary to what clearfix does. Plus, that is also a side effect, which is why it doesn't always work as intended. That said of course, there are many ways to skin a cat... — BoltClock, Nov 08 '12 at 23:35
@BoltClock: I frequently mix up "clear floats" and "contain floats". Oops? — thirtydot, Nov 08 '12 at 23:39

score 4 · Answer 2 · answered Jun 07 '11 at 23:42

4

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.

answered Jun 07 '11 at 23:42

Guffa

687,336
108
737
1,005

score 2 · Answer 3 · answered Jun 07 '11 at 23:54

2

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

answered Jun 07 '11 at 23:54

joakimdahlstrom

1,575
1
11
23

As described in the [On Having Layout](http://www.satzansatz.de/cssd/onhavinglayout.html) article, the Microsoft proprietary zoom property causes an element to gain layout, and floats are auto-contained by layout elements. – Ryan Prechel Mar 26 '13 at 17:31

John Slegers · Answer 4 · 2020-03-11T16:44:14.077

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.

Pegues · Answer 5 · 2017-01-09T13:57:56.540

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

"Best clearfix ever?"

5 Answers5

Linked