Could this be the new clearfix?

Question

Is there a more simplified way to use .clearfix?

old:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

My new clear fix:

.coreys-clearfix:after {
    content: "";
    display: block;
    clear: both;
}

I put this through a validator and I had no errors. Does anyone else know of or see any reason why this can not be used? it only saves 3 lines of code and a ., but still.

The simplest way to use clearfix is to not use clearfix. – BoltClock Sep 12 '12 at 16:25 — BoltClock, Sep 12 '12 at 16:25

Nix · Answer 1 · 2012-09-12T16:35:10.967

3

I don't think so, no.

The reason for the dot, is to make the .clearfix:after work in legacy browsers.

Nicholas Gallagher explains why:

Firefox < 3.5 will benefit from using Thierry’s method with the addition of visibility:hidden to hide the inserted character. This is because legacy versions of Firefox need content:"." to avoid extra space appearing between the body and its first child element, in certain circumstances (e.g., jsfiddle.net/necolas/K538S/.)

This is why content is not empty, and the three remaining lines (visibility, line-height and height) is to make sure the clearfix doesn't actually take up room in your layout.

Actually, Nicholas has made a new clearfix, which does the same job with less bytes. Read up on it here: http://nicolasgallagher.com/micro-clearfix-hack/

Good effort, though. :)

edited Sep 12 '12 at 16:35

answered Sep 12 '12 at 16:28

Nix

5,746
4
30
51

Although if one isn't targeting legacy browsers, there is no reason not to have empty content (which is *not* the same as *no* content). – BoltClock Sep 12 '12 at 16:31
That is true, but in this you save practically nothing from *not* targeting legacy browsers, so you might as well do it. – Nix Sep 12 '12 at 16:37
Thank you Nix. I am currently working on my own start up site and as witch the % of people missed by not supporting legacy browsers for my site will not currently affect it, I would hope. – Corey Trombley Sep 12 '12 at 17:12

score 1 · Answer 2 · answered Apr 18 '14 at 09:49

If you want support for older browsers, you'll need a more elaborate clearfix :

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

If you don't care about support for older browsers, this is the way to go :

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

The dot is there for older browser support. If you don't need that, you can use the "new" one.

This answer actually explains it pretty nicely.

edited May 23 '17 at 11:56

Community

1
1

answered Sep 12 '12 at 16:36

Madara's Ghost

172,118
50
264
308

Could this be the new clearfix?

3 Answers3