对overflow与zoom”清除浮动”的一些认识 张鑫旭博客笔记

by  zhangxinxu  from  http://www.zhangxinxu.com

本文地址：http://www.zhangxinxu.com/wordpress/?p=621

元素的包裹性

一提到“包裹”一词，我想到了就是白细胞吞噬细菌（形象化思考 – 联想），以及温暖及安心（情感化思考）。这因人遗传、成长等因素相关。为什么我要讲这些看似无关主题的东西，因为下面我要将的很多东西就是自己的感觉，“我觉得它就是这个样子的”，很多主观的东西。

CSS中，有很多的属性一提到我就会想到“包裹”这个词，像“浮动”，“绝对定位”，“inline-block”，“overflow”，“zoom”，就这些，没有其他了。//zxx:这里的overflow特指overflow:hidden/scroll/auto属性，不包括overflow:visible;

对于浮动，我在“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/7对overflow属性的理解有误，说白了是IE6/7的一个bug，IE8已经修复这个问题，也就是说IE8下overflow:hidden可以清除浮动造成的影响，您有兴趣可以自己测试一下。
(多谢dony的提醒)修正为：
IE6对overflow属性的理解有误，说白了是IE6的一个bug，IE7开始已经修复这个问题，也就是说IE7/IE8下overflow:hidden可以清除浮动造成的影响，您有兴趣可以自己测试一下。

对于zoom的包裹性…恩…还是先简单介绍下这个zoom属性吧，也很简单，就是比例缩放

我们可以这样想，要是没有zoom等属性，IE6和IE7下，浮动属性的图片的父div的高度塌陷，就是个痿蛋0；再假设现在有个div标签上有个zoom:2;的样式来放大父标签及里面图片2倍，肯定是从父标签开始拉伸缩放的，但是如果父标签是个塌陷高度，无论怎么拉伸，其高度依旧是那个0，也就是说拉伸根本就没有效果，这显然也不应该，于是“被动的包裹”似乎成为了必要。

对于IE8，则zoom属性无“包裹性”，正如上面IE8下截图显示，IE8 zoom放大的是内部元素，父标签不缩放，于是父标签即使是个痿蛋0，其与内部元素的缩放一点关系也没有，也就没有的包裹的必要。所以IE6/7 zoom有包裹性，IE8没有。

有人可能会质疑，明明就是zoom让IE haslayout，于是…… 我要问的是，你清楚的看得见这个haslayout吗？为什么haslayout可以清除浮动造成的影响？不急，下面我会解释为什么不用haslayout这个东西。