容易被误解的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 条评论
登录 后参与评论

相关文章

来自专栏Jimoer

Java程序优化之替换swtich

关键字switch语句用于多条件判断,功能类似于if-else语句,两者性能也差不多,不能说switch会降低系统性能。在绝大部门情况下,switch语句还是有...

26811
来自专栏极客编程

angularJS之站在jQuery的肩膀上

托互联网日新月异发展的福,浏览器变成了人们接入互联网的入口,而JavaScript 这个曾经的小语种,终于成功地站到了舞台的中央,唤起了开发者的兴趣。

531
来自专栏進无尽的文章

设计模式| 结构型模式

其他同系列的文章还有: 面向对象编程中的六大原则 设计模式| 创建型模式 设计模式| 结构型模式 设计模式| 行为型模式 (上) 设计模式| 行为型模...

582
来自专栏Java技术

Java代码评审歪诗!让你写出更加优秀的代码!

架构师说, 用20个字描述代码评审的内容, 自省也省人。由于是一字一含义, 不连贯, 为了增强趣味性, 每句都增加对应的歪解。只是对常见评审的描述, 不尽之处,...

741
来自专栏进击的君君的前端之路

ReactJS简介

1133
来自专栏java工会

编写高质量代码的思考

最近在看《代码大全》,可以说是一本软件开发的百科全书,特别厚,但是干货也很多。平时写代码,代码规范是一个最低的要求(很多老代码连最低要求都达不到),为什么要这样...

660
来自专栏互扯程序

毕业季,跳槽季,不刷点面试题怎么能行?

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。 前言 马上就是一年一度的毕业季 跳槽季,找工作三大要素,简...

3185
来自专栏上善若水

L004Linux和androidNDK之c代码风格及约定

813
来自专栏Java帮帮-微信公众号-技术文章全总结

【大牛经验】Java9的新特性

Java 9 包含了丰富的特性集。虽然Java 9没有新的语言概念,但是有开发者感兴趣的新的API和诊断命令。

743
来自专栏菜鸟计划

javascript简史

一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

2655

扫码关注云+社区