overflowhidden用法思考

 

今天在群里（54430674）交流高度自适应问题，linxz℡推荐使用：

height:auot;min-height:100px !important;

或

height:auto;overflow:hidden;zoom:1;

这是一个有意思的话题，特别第2种方法给人很多想象的空间。例如：

<style type="text/css">
#div1 {
    height:auto;
    border:solid 1px red;
    zoom:1;
}
#div2 {
    float:left;
    height:100px;
    width:100px;
    background:blue;
}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

在上面示例中，外包含框在非IE中是不能够子适应高度的，但是增加了声明overflow:hidden;，即：

<style type="text/css">
#div1 {
    height:auto;
    border:solid 1px red;
    zoom:1;
    overflow:hidden;
}
#div2 {
    float:left;
    height:100px;
    width:100px;
    background:blue;
}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

你会发现包含框在非IE中也能够自动适应包含元素的高度，很奇怪的现象。

我们知道overflow属性设置当元素的内容溢出其区域时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。而hidden正相反，会自动剪切多出的内容。

现在就有一个问题了：

应该说，外包含框高度为0，那么它应该剪切所有的内容，即不显示任何内容。但是试验的结果却相反。这不得不让人思考其他问题：为什么呢？

考虑这个问题，我们应该从浏览器的解析机制开始，首先，浏览器遵循从上到下、从内到外的顺序来解析HTML结构，然后再解析这些结构的CSS样式。

而CSS属性的解析也是有顺序的，一般会遵循先主后次的顺序，也就是说overflow属性晚于其他属性进行解析，当浏览器解析完<div id="div1">的样式时，它会按着一定的逻辑不断进行计算。当解析overflow属性，它要完成几个计算问题：第一，元素本身是否定义了高度，第二，元素的布局模式，第三，包含子元素的大小。如果当元素没有明确定义高度的情况下，而布局又是以流动布局显示，此时它会考虑子元素的高度。也就是说，此时overflow:hidden声明触发了浏览器重新计算包含框的高度的可能性，此时它会考虑到子元素的高度，并努力包含子元素，避免子元素被裁切显示。因此，我们会看到了使用overflow:hidden声明之后，包含框能够自适应包含内部的子元素。

实际上，这是两种逻辑计算的重合所引发的一个有趣话题。

这是样吧的个人思考，并不代表权威解释，留待更多感兴趣的读者去思考和探索。