.clearfix的用法

/*用来修正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:"";而存在吧?

原文地址:https://www.cnblogs.com/nicefuting/p/5311645.html