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


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


Solution:2

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


Solution:3

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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »