浮动，前端开发人员进行css布局的必备神器，但使用浮动会使元素脱离正常文档流，给我们造成一些不想要的效果，此时就需要用到“清除浮动”这项技能了。一般来说，清除浮动大家首先想到的使用“overflow:hidden”这个方法，这个方法清浮动最大的弊端在于“隐藏超出父元素的内容部分”，且应用于浮动元素的父元素，如果要清除浮动元素对后面元素的影响，此方法是行不通的。示例：
.box {
overflow: hidden;
border: 4px solid blue;
}
.div1 {
float: left;
width: 200px;
height: 200px;
background: hotpink;
}
.div2 {
width: 300px;
height: 300px;
background: green;
}
接着一个常见的方法是 clear:both,此方法我觉得和overflow:hidden这个方法是互补的，它应用于浮动元素后面的元素，清除浮动元素对后面元素的影响，当然同时，也清除了对父元素的影响。示例，
.box {
border: 4px solid blue;
}
.div1 {
float: left;
width: 200px;
height: 200px;
background: hotpink;
}
.div2 {
clear: both;
width: 300px;
height: 300px;
background: green;
}
但是这个方法的缺点也很明显，如果单单是用来给父元素来清除浮动，就会额外的添加一个标签，从而破坏了代码的语义。这里还有一些注意的是，添加的这个元素不能有浮动属性，且是一个块元素或table元素，不然是无法给父元素清浮动的，有兴趣的童鞋，可以尝尝修改一下代码，这里就不做演示。
介绍完前面的两种方法之后，重点是第三种方法，现在各大网站，最常用的清除浮动方法。通过伪元素的使用，来清除浮动对父元素的影响。
.clearfix {
*zoom: 1;
}
.clearfix:before,.clearfix:after {
content: '';
display: block;
}
.clearfix:after {
clear: both;
}
这个方法通过给元素加class名的方法，来灵活的清除浮动对父元素影响，和第二种方法最大的不同在于，给标签加“clear: both”属性的元素，是通过伪元素来“虚拟”出的一个空元素，所以并不破坏语义结构，并且通过zoom来兼容IE6、IE7浏览器。
网友评论