对清除浮动的一些总结与思考

在css中有一个很常用的属性是float，可以极大地增加页面布局的灵活性，但是由于对元素设置float后，该元素就脱离了文档流，在加上float脱离文档流的特殊性（不同于position:absolute，元素float后普通的块级元素处在浮动元素下层，但它内部的文字（以及行内元素）会环绕浮动元素），容易造成一些布局上的紊乱。所以一般元素进行浮动定位后要尽快清除。

清除浮动常用的方法有

1、在页面中加空白标签(要为block元素或设置为display:block)，对该标签设置clear:both;

2、运用css伪元素:after，添加一个不可见的block元素（里面可以放任何内容），并对该block元素进行浮动清理clear:both;(不支持IE6/7)

3、对浮动标签的父标签使用overflow:auto或者是hidden;（用hidden的话要特别注意里面的内容超出的部分是不可见的）

4、对父标签使用display:inline-block;

5、对父标签使用clear:both.

以上方法中各有利弊：

第一种方法会增加额外的无意义标签，当要清除比较多的浮动时不建议选择，其清除浮动的原理在于对这个空标签使用了clear:both,使得接下来的文档流只能在标签的下方开始，而这个空白标签本身又不占用文档流的空间，于是页面就表现的符合预期了

第二种方法不支持IE6/7，通过伪元素增加一个块状元素，之后的道理同上

第三种方法的道理在于overflow属性触发了块状格式化范围，而块状格式化范围会自动清理浮动

相关链接:http://rebuildpattern.com/node/44

　　　　 http://www.webbw.com/

第四种和第五种方法严格来说是不完全的，因为它们都是对父标签的作用，结果是父标签之外的文档流不受影响，但是父标签之内的其他元素仍然受到浮动的影响！第四种方法是通过设定父标签的范围来限制浮动元素的影响范围，而第五种方法也是通过对父标签进行浮动清理，使得接下来的文档流遵从正常的文档顺序从该父标签的下面空白处开始。

还有一种解决办法是对父标签也进行浮动，在允许的情况下，可以对整个页面中的内容进行浮动，最后在文档末尾用一次浮动清理