/* 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.
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.
The latter seems to be fine because it also considers IE6 (zoom:1;
).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With