容易被误解的overflow:hidden

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

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的童鞋看一下:

overflow-ie6 overflow-ie8

overflow-chrome overflow-firefox

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

理论依据

那么,这个原理到底是什么呢?当然是css2.1规范。在规范中中我们可以找到这样一段话:

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。有兴趣的童靴可以研究一下。

本条目发布于。属于CSS分类,被贴了 标签。
               

容易被误解的overflow:hidden》上有21条评论

  1. math-beauty

    父div没有设置position:relative 设置了overflow: hidden; 子div设置了position:absolute; 但是子div就是浮不上来。

  2. bruce

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

    这两句不成立

  3. bruce

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

    这两句不成立

  4. 最後的獨舞

    你这是种误解,首先absolute是以父级的relative 为参考点,既absolute的父级不是<div class="overflow"> 而是position(好像是这个加了position:relative)

    1. 小李刀刀 文章作者

      以父级的relative为参考点:这是指定位。
      overflow:hidden,默认情况下是阻止子孙元素溢出,当子孙元素为absolute定位时,单靠overflow:hidden不能阻止子孙元素溢出(参见css2.1规范的11.1节)。这时候,只有包含块(containing block)元素的overflow:hidden才起作用。

      本文指的就是借助这个特性,既要用overflow:hidden这个属性来创建(block context),又要让子孙元素能够overflow:visible。

  5. 最後的獨舞

    你这是种误解,首先absolute是以父级的relative 为参考点,既absolute的父级不是<div class="overflow"> 而是position(好像是这个加了position:relative)

    1. 小李刀刀 文章作者

      以父级的relative为参考点:这是指定位。
      overflow:hidden,默认情况下是阻止子孙元素溢出,当子孙元素为absolute定位时,单靠overflow:hidden不能阻止子孙元素溢出(参见css2.1规范的11.1节)。这时候,只有包含块(containing block)元素的overflow:hidden才起作用。

      本文指的就是借助这个特性,既要用overflow:hidden这个属性来创建(block context),又要让子孙元素能够overflow:visible。

  6. 大漠

    学习到了另外一种的使用,看来我还要好好学习一下css的规范。谢谢博主的教程。

  7. Pingback引用通告: IE ARGB背景半透明滤镜溢出隐藏bug | himeters

  8. 老谭

    我觉得博主这篇文章有误导,其实这篇文章的重点应该是postion而不是overflow,如果父容器position没有设置absolute或者relative,那么设置了postion:absolute的节点是相对于更上一级节点最终body来定位,早已脱离了文档流,何来overflow隐藏

    1. 小李刀刀 文章作者

      老谭 :

      我觉得博主这篇文章有误导,其实这篇文章的重点应该是postion而不是overflow,如果父容器position没有设置absolute或者relative,那么设置了postion:absolute的节点是相对于更上一级节点最终body来定位,早已脱离了文档流,何来overflow隐藏

      脱离文档流不等于改变了DOM层级关系。比如:

      <div style="overflow:hidden;">
          <div style="position:relative;">
              <div style="position:absolute;right:-100px;">a</div>
          </div>
      </div>
      

      这种情况下,第三层的div虽然脱离了文档流,但是在DOM结构上,仍是两个父级div的子元素。根据css规范,其依然受祖先元素的”overflow:hidden”影响。

      所以,老谭的观点结论虽然正确,但解释却不准确。

  9. 子非鱼

    这个真学习了,我都是把overflow: hidden; clear来用了

  10. 小李刀刀 文章作者

    宁波LED :

    那在overflow:hidden没用的时候,什么办法才能补救呢

    这要看具体情况,如果是只加了overflow:hidden,那么可能是文中提到的绝对定位子元素溢出。如果是IE6,有可能是layout造成。

  11. laoya

    我就碰到过,在IE6下子元素定位是relative,overflow也没用

评论已关闭。