最常见的方式
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .clearfix { *+height: 1%; }
经测试下面两种也可以达到效果
.clearfix { overflow: auto; _height: 1% }
.clearfix { overflow: hidden; _zoom: 1; }
我自己常用的方式
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /*IE/7/6*/
/*为了防止低版本的IE浏览器不支持after选择器或者某些属性,在最后加上zoom:1来清除浮动。*/
}