CODEWITHSUNDEEP
cssclearfix
Corey Trombley
Corey Trombley

Reputation: 136

Could this be the new clearfix?

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.

Upvotes: 1

Views: 754

Answers (3)

John Slegers
John Slegers

Reputation: 47081

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

Upvotes: 1

Madara's Ghost
Madara's Ghost

Reputation: 174957

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.

Upvotes: 0

Nix
Nix

Reputation: 5998

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. :)

Upvotes: 3

Related Questions