容易被误解的overflow:hidden

为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的。

网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦。但如果认真阅读一下css规范，会发现overflow:hidden其实并不一定隐藏溢出内容。

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

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

1. 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
2. 内部溢出的元素是通过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的父元素之外，但是它依然被显示了。而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。