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