清除浮动的一些总结

1、清除浮动主要有两类方法。1.对父元素中最后一个元素清除浮动。通常为了不影响布局，我们会在浮动元素末尾添加一个空的标签对。然后设置属性为clear：both。例如 <div style=”clear:both”></div>。这种方法兼容性好，但是会增加一些无意义的标签，尤其是页面中大量用到清除浮动时候。

2、还有一种替代方案，原理是一样的。.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}.clearfix { *zoom:1; }解释一下，在父元素上添加.clearifix样式后，会在末尾添加一个伪元素，内容为”.“ 拥有清除浮动的属性。这样就和上一种方一样，但是没有增加额外的标签。下面一行是为了兼容ieliu浏览器。因为ie不支持：after。所以就要采取我们接下来要介绍的另一类方法。

3、2.触发父元素的BFC，支持BFC的浏览器（IE8+，firefox，chrome，safari），不支持BFC浏览器（ie6,ie7）通过触发hasLayout实现类似效果。至于他们具体是什么，请自行百度，因为我现在也不是很清楚。但是触发后，产生的效果是我们想要的。那么触发条件是什么呢？下面介绍一下部分属性。

4、触发BFC的属性float 除了none以外的值overflow 除了visible 以外的值（hidden，auto，scroll ）display (table-cell，table-caption，inline-block)position（absolute，fixed）fieldset元素

5、触发hasLayoutposition: absolutefloat: left|rightdisplay: inline-blockwidth: 除 “auto” 外的任意值height: 除 “auto” 外的任意值 zoom: 除 “normal” 外的任意值也就是说父元素上有这些属性的时候，就不需要清除浮动了。但是这些属性通常会影响到布局，所以我们经常会用不影响布局的zoom:1，来触发ie的hasLayout。

6、综上我们推荐用.clearfix的方法。当然这里只是一个总结，还有一些其他的方法可以用，或者可以不使用float布局。