容易被误解的overflow:hidden

为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的，网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦（详见[cref flexible-two-column-layout-reloaded]）。但如果认真阅读一下css规范，会发现overflow:hidden其实并不一定隐藏溢出内容。我之前翻译的[cref clearfix-reloaded-overflowhidden-demystified-translation clearfix改良及overflow:hidden详解]一文中第二部分有讲解，不过可那篇文章的重点是谈清除浮动的问题，所以有关overflow的问题反而没引起注意。

overflow:hidden并不隐藏所有溢出的子元素

对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁（隐藏）。但事实确实如此吗？答案是“未必”！事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，具体来说，需要同时满足以下条件：

拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
内部溢出的元素是通过position:absolute绝对定位；如果你只关心结论，那么记住这两点就够了。我这里有个demo，结构如下：

<div class="position">
        <h2>position box</h2>
        <div class="overflow">
            <h3>overflow box</h3>
            <div class="static">
                <p>This is static child element. This is static child element. This is static child element. This is static child element.</p>
                <p>This is static child element. This is static child element. This is static child element. This is static child element.</p>
            </div>
            <div class="absolute">This is absolute child element. This is absolute child element. This is absolute child element. This is absolute child element.</div>
        </div>
    </div>

我简单截几个图给懒得打开demo的童鞋看一下：

在demo中，你可以看到绝对定位的元素被定位到了overflow:hidden的父元素之外，但是它依然被显示了。而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。

理论依据

那么，这个原理到底是什么呢？当然是css2.1规范。在规范中关于overflow的描述中我们可以找到这样一段话：

This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

简单翻译一下：

此属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域~~，可以理解为body~~）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。

即使是我重新整理过的语言，还是感觉有点绕。不过在这段话里，出现了一个重要的名词“包含块”（containing block）。包含块是什么呢？这个大家其实比较熟悉，一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是~~body元素~~（更正：浏览器内容区域）。（2012-09-05: 如果给body元素指定宽高且不指定position:relative，则body也不是绝对定位子元素的包含块。而html元素，即使指定了宽高和position:relative，也只影响绝对定位后代元素的定位，而不能裁剪溢出元素。）

这就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。这就好比驻日美军，他们不受日本的法律约束而受美国军法约束。因为他们的“包含块”是美国军方而不是日本法院。实际上在css2.1规范的11.1节，还有更明确的说明：

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block。

翻译：一个绝对定位的后代块元素，部分位于容器之外。这样的元素是否剪裁并不总是取决于定义了overflow属性的祖先容器；尤其是不会被位于他们自身和他们的包含块之间的祖先容器的overflow属性剪裁。

回到我的demo，overflow的元素位于相对定位的元素与绝对定位元素之间，因此根据规定它不能剪裁绝对定位的子元素。也就是说爷爷相对定位，老爸规定溢出隐藏，可是儿子是绝对定位元素。这时候儿子是否隐藏由爷爷决定，而不是老爸。

应用场景

明白了这个理论，对我们的工作有什么指导意义呢？首先，我们知道overflow:hidden并不是万能的，要想彻底剪裁它的所有子元素，它不但要有overflow:hidden，而且还要作为所有子元素的包含块。这样万一某一天你看到overflow:hidden里面的东东居然被显示出来了，你才知道是为什么。其次，如果我们先定义了overflow:hidden防止容器被撑开，或者用这个方法做了神马图文混排、清除浮动之类的处理，甚至是用了overflow:hidden来实现块级上下文这样上流的东东，突然产品又说里面的一个浮层要显示，要在右边，要在右上角，要在左边两个栏宽外面……那么你就知道要怎么搞了。

在oocss中，对模块的定义充分利用了这个特性。oocss的模块基本结构如下：

<div class="mod">
    <div class="inner">
        <div class="hd"></div>
        <div class="bd"></div>
        <div class="ft"></div>
    </div>
</div>

他们就对inner应用了position:relative，对bd应用了overflow:hidden和_zoom:1。有兴趣的童靴可以研究一下。