关于清浮动的几种方法及注意事项

       浮动，前端开发人员进行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浏览器。