css中clearfix清除浮动的用法及其原理示例介绍

clearfix的定义

复制代码代码如下:
.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{idth: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://.jb51./css/32677.html