.clearfix的用法

Posted 2020-06-27

/*用来修正ie6*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
}

clearfix用在父元素上。But .clearfix:before{}的作用是什么呢？可以不写吗？

 

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 
.clearfix{*zoom:1;} 
 
但是对于很多同学这种优化程度代码还是不够给力，clearfix 发展到现在的两个终极版。
终极版一：
.clearfix:after { 
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}/*IE/7/6*/ 
 
解释下:content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。
终极版二：
.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1;/*IE/7/6*/ 
} 

由此可以看到，.clearfix:before{}的用法可能是指为了content:"";而存在吧？