Usage of the. Clearfix

/* to fix IE6 . */ . Clearfix {*zoom:1;} . Clearfix:after {content:"."; Display:block; height:0; Clear:both; overflow:hidden;}

The Clearfix is used on the parent element. But what is the role of clearfix:before{}? Can you not write it?

. Clearfix:after{Visibility:Hidden;Display:Block;font-size:0;content: " ";Clear:both;Height:0; }. Clearfix{*zoom:1;}But for many students this level of optimization code is not enough to force, Clearfix developed to the present two Ultimate version. Ultimate Edition One:. Clearfix:after{content:"\200b";Display:Block;Height:0;Clear:both; }. Clearfix{*zoom:1;}/*IE/7/6*/Explanation: Content: "\200b"; this parameter, the Unicode character character has a "0 width space", that is u+200b, instead of the original ".", you can reduce the amount of code. And no longer use Visibility:hidden. Ultimate Edition II:. Clearfix:before,.clearfix:after{content:"";Display:Table; }. Clearfix:after{Clear:both;}. Clearfix{*zoom:1;/*IE/7/6*/}

As you can see, the use of. clearfix:before{} may refer to content: "";

Usage of the. Clearfix