css清除浮动深度解析

首先引入一个新的概念“包裹”。

float：left会使得该属性的作用容器包裹住其内部元素；那么还有么有其他属性能够产生类似于浮动这种包裹性？

答案是有的：像“浮动”，“绝对定位”，“inline-block”，“overflow”，“zoom”，就这些，没有其他了。//zxx:这里的overflow特指overflow:hidden/scroll/auto属性，不包括overflow:visible;

包裹按其方式分为两种：

1.主动包裹：2：被动包裹

对于浮动，我在“CSS float浮动的深入研究、详解及拓展(一)”一文中花了一大段讲浮动的包裹性，一个div，默认宽度100%显示，一旦有了浮动属性（none除外），其宽度包裹与内部的元素，浮动的包裹性显而易见。

对于absolute绝对定位，我在“absolute绝对定位的非绝对定位用法”一文中也提到过其包裹性，相信有经验的同行们应该都知道absolute元素的这个特性，即absolute元素（如果没有设置width值），其宽度自适应于内部元素，也正是这个原因，absolute属性常在jQuery插件中用来做宽度计算。所以，absolute元素也是具有包裹性的。

对于inline-block，这个可以说是包裹的祖宗了，无论是float还是absolute的包裹性都是向inline-block靠齐的，神奇而伟大的inline-block元素，它的故事可以写成一本书了，打住，不多说。

对于，浮动(float)，绝对定位(position:absolute)以及inline-block的包裹性我称之为“主动包裹”，其标签宽度会收缩至内部元素大小；而overflow与zoom，我称之为“被动包裹”。对于overflow的包裹性其实不难理解，例如一个div里面仅有个浮动元素（一张美女图片），那么这个div高度会塌陷，现在这个div要应用overflow:hidden;属性，想想看，既然div高度塌陷，那么div里面的这个图片就应该在div的外部，按照overflow:hidden的功能，这个图片应该直接-“咔”-一声截掉不显示的，但是这可以吗，显然不行，怎么办，只能去包裹这个浮动的美女图片，于是设置了overflow:hidden属性的div有了高度，同时把浮动的图片封在了里面。您可能会想到IE下的overflow好像没有这么回事，事实上是这样的，

IE6对overflow属性的理解有误，说白了是IE6的一个bug，IE7开始已经修复这个问题，也就是说IE7/IE8下overflow:hidden可以清除浮动造成的影响，您有兴趣可以自己测试一下

清除浮动的方法:

清除浮动造成的影响的方法有两大类，一类就是clear:both/left/right;清除，另外一类就是本文要讨论的“包裹”清除。

我在上部分提到的这些“包裹性”元素都可以清除浮动造成的影响