Which clearfix method?

Question

/* Clear Fix */

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

or

Answer 1

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.