容易被误解的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样式的块元素内部的元素溢出并不总是被隐藏,具体来说,需要同时满足以下条件:

  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的父元素之外,但是它依然被显示了。而普通元素在水平方向上的溢出被隐藏,垂直方向上撑开父元素。也就是说,普通元素的表现符合我们的预期,而绝对定位元素并不如很多人想当然的那样被隐藏。

理论依据

那么,这个原理到底是什么呢?当然是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。有兴趣的童靴可以研究一下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

带你轻松打开SVG动画的大门 - 腾讯ISUX

792
来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

652
来自专栏walterlv - 吕毅的博客

语义耦合(Semantic Coupling)

发布于 2018-02-05 10:38 更新于 2018-06...

171
来自专栏Jerry的SAP技术分享

一个查看UI5控件所有公有方法的小技巧

一个很小的tip:比如我想把UI5表格控件里的每列设置成宽度根据显示的内容自适应,需要知道应该调用控件的哪个方法来实现。

1889
来自专栏前端小叙

绝对定位多个字居中显示的css

在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定...

2559
来自专栏拂晓风起

JS:指定FPS帧频,requestAnimationFrame播放动画

1002
来自专栏Thinks

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

1042
来自专栏杨龙飞前端

BFC概念和作用,触发条件

1136
来自专栏数据小魔方

sparklines迷你图系列6——Comparison(Columns)

今天分享sparklines迷你图中的Comparision图表类型中的Columns图表。 该图表说到底其实就是我们日常工作中最常用到的柱形图。 该图表的函数...

2384
来自专栏知道一点点

bootstrap快速入门笔记(二)-栅格系统,响应式类

1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列

1173

扫描关注云+社区