今天看了一篇博文，来自http://www.zhangxinxu.com/wordpress/?p=621。对于清除浮动有了一些新的认识。
首先归纳下我们常用的清除浮动的方法：
- 用float属性，借用一个Demo
- 用position:absolute;属性，再借用一个Demo
- 使用inline-block属性 Demo
- 使用overflow:hidden;属性 Demo（此方法对IE6无效） Demo
- 使用 zoom属性（此方法只对IE6/7有效，IE8无效） Demo
另外还有两种方法，我在以前也说到过：一种是使用空标签；一种是使用after伪类。但是这两种方法增加的代码量太多，我以后不太会用它们。需要注意的是上面的清除浮动的方法除了最后两个是有针对性的，其他是左右通杀，目前主流的浏览器都有效。
元素的“包裹性”
“包裹” 这个概念，是文章的博主自己归纳的。包裹性简单来说就是：任何元素（包括浮动和没浮动的）的父元素被添加上面提到的5种属性之一后，父元素的高度（和某些情况下的宽度）会自动的改变，与浮动元素的高度”相等“，就好像是父元素将子元素包裹住了一样。当然这个“包裹性”是要考虑到父元素的padding值的，这点可以仔细的观察上面的DEMO。
另外，根据博主的分析，“包裹”是分为两类的。一类是“主动包裹” ，一类是“被动的包裹”。“主动包裹”不仅父元素的宽度会随着子元素变化，高度也是。仔细观察上面前三个例子的DEMO，即：float、position:absolute、inline-block，他们就属于这种“主动的包裹”；而overflow:hidden和zoom就是“被动的包裹”，只有高度在变，而宽度是会尽量的充满整个包裹它的容器。