容易被误解的overflow:hidden

第 2 页 理论依据

理论依据

那么，这个原理到底是什么呢？当然是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元素。

这就说明，一个绝对定位的元素是否被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。有兴趣的童靴可以研究一下。