Which clearfix method?

Question

/* Clear Fix */

.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix {height:1%;}

or

.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix, *:first-child+html .clearfix {zoom:1;}

Which would work the best? I used first one by now and never had an issue.. Thanks.

i think you made a mistake on the second one > in my experience you have to put IE6 and IE7 hack on separate line statement or it won't work — Knu, Jul 13 '10 at 08:30
why waste properties on hiding the dot you've added, when `content:""` creates element without creating a visible character and line!? — Kornel, Jan 15 '11 at 17:51

score 3 · Answer 1 · answered Jul 12 '10 at 16:19

Most succinct technique is setting overflow:hidden for modern browsers:

overflow:hidden;
zoom:1;

If an element needs to flow out of the dimensions ( negative margins or positioning ) then clearfix:

#el:after { content:""; clear:both; display:block; visibility:hidden; }

For IE6 and below, you need to trigger hasLayout ( through a width, zoom:1, height, and other property/value combos ). Starting with IE7, overflow will clear the floats.

score 1 · Answer 2 · edited Oct 31 '11 at 05:50

1

The latter seems to be fine because it also considers IE6 (zoom:1;).

edited Oct 31 '11 at 05:50

Chris Frederick

5,482
3
36
44

answered Jul 12 '10 at 09:05

Sarfraz

377,238
77
533
578

either of those account for IE6. the latter is just more flexible. – meder omuraliev Jul 12 '10 at 16:28

score 0 · Answer 3 · answered Jul 12 '10 at 09:07

0

This has always worked for me. Very similar to yours

.clearfix:after {
    content: "."; 
    display: block;
    height: 0; 
    font-size:0;
    clear: both; 
    visibility:hidden;
}
    .clearfix{display: inline-block;}
    * html .clearfix {height: 1%;}
    .clearfix {display:block;}

answered Jul 12 '10 at 09:07

Marko

71,361
28
124
158

1

inline-block and block along with height:1% is redundant. `content:""` is good enough. – meder omuraliev Jul 12 '10 at 16:25

Which clearfix method?

3 Answers3

Linked