复制代码代码如下:
.clearfix:after {}{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size:0;
}
.clearfix {}{ *zoom:1;}
.clearfix的原理：
1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。
3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。
.clearfix的实例
复制代码代码如下:
*{padding:0px; margin:0px;}
ul{border:3px solid #F00;}
ul li{width:50px; height:50px; float:left; background-color:#00F; list-style:none; margin-right:10px;}
.clearfix_after{zoom:1;}
.clearfix_after:after{
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
参考资料： css用clearfix清除浮动 https://www.jb51.net/css/32677.html
