你所不知道的CSS Overflow Module

最近在项目中使用 overflow 属性的时候踩到了几个以前从未踩过的坑。在填坑的过程中发现，原来使用 overflow 的时候还是有不少的坑，而且这些坑都是因为自己对该属性不甚了解所造成的，或者说是和其他CSS属性在一起使用所触发的。那么在使用 overflow 应该怎么使用才能避开这些不必要的烦恼呢？或者说在使用 overflow 不应该和哪些属性结合在一起使用呢？为了解开这个迷我重读了有关于 overflow 的规范。今天将相关的理解和新的认知小结一下与大家共享，希望对于大家在实际使用的时候能尽可能的避开这些坑。

触发 overflow 坑的场景

触发这个坑也是无意之中触发的，毕竟以前从未触发到。那么是怎么样的一个场景触发的呢？这个场景很简单：

借助CSS的能力绘制一个类似下图的背景效果。

虽然在容器 .root 中设置了容器的尺寸，并且 overflow-x 设置了 hidden :

.root {
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

注意，代码中显式的设置了 overflow-x:hidden 。按照我们对 overflow 属性的认知，横向溢出 .root 容器的内容都应该会被截取（看不见）。但事实上并非如此，你看到的效果却如下， 水平方向还是会出现滚动条，溢出的内容并没有被裁切 ：

尝试着把 .root 中的 overflow-x:hidden 移动到 body 元素中：

body {
    width: 100vw;
    height: 100vh;
    background: #D91B1A;
    overflow-x: hidden;
}

如此一来，你会发现在桌面端符合我们的预期，溢出内容会被裁切，但千万别高兴的太早，移动端（不管是Android还是iOS系统下），问题依旧。我继续往 html 元素设置 overflow-x:hidden 仍然在移动端上无法正常工作。 那么这是什么呢？先不解答其中原委，给大家留下一个噱头，感兴趣的同学请继续往下阅读。

有关于CSS Overflow Module

到目前为止，有关于CSS Overflow Module主要有两个版本，即 Level 3 和 Level 4 。在Level 3版本中涵盖了我们常见的 overflow 的使用，也有一些我们不常见的，而且 text-overflow 这样的属性也纳入到了Level 3版本中（被纳入到 Automatic Ellipses ）。

overflow的类型

在CSS中的 overflow 主要作用是用来描述一个扩展到该框的边缘，即 内容边缘 、 填充边缘 、 边框边缘 和 外距边缘 。简单地说就是如何用来控制溢出，从而不让溢出的内容来影响其他元素的布局。从规范中看，有关于 overflow 主要分为两种类型：墨水溢出（Ink overflow）和 可滚动的溢出（Scrollable overflow）。

墨水溢出

墨水溢出的盒子是盒子的一部分，它的内容创造了一个视觉浆果以外的盒子的边框（border-box）。墨水溢出是绘画（Painting）的溢出，主要用来定义不影响布局或其他方式扩展滚动溢出（Scrollable overflow），比如 box-shadow 、 border-image 、 text-decoration 和 outline 等。

在CSS中，有些属性（比如 text-shadow ， box-shadow ）在盒子定义中是一种模糊的，并没有定义它们所覆盖的视觉范围（理论上是无限的），所以墨水溢出也没有一个明确的范围定义。

墨水溢出区域（Ink overflow region）是一个非矩形区域，墨水矩形是坐标轴与盒子坐标轴对齐，并包含墨水溢出区域的最小矩形。 注意，墨水溢出矩形在盒子坐标系中是一个矩形，但是由于 transform 在其他坐标系中可能是非矩形的 。

请注意，这里可能就给我们在使用 overflow 时埋下了一个坑： overflow 和 transform 一起使用时，可能有深坑存在！

可滚动溢出

可滚动溢出（Scrollable Overflow）可以说是我们比较熟悉的溢出类型。滚动溢出和墨水溢出类似，他也有框的概念存在。滚动框的可滚动溢出是扩展到该框的 padding 边缘之外的一组内容，需要为其提供滚动机制。

可滚动溢出区域是可滚动溢出所中用的非矩形区域，而可滚动溢出矩形是最小矩形，其轴和框的轴对齐，并且包含可滚动溢出区域。常见的可滚动区域有：

• 盒子本身的内容和填充区域（ 有关于内容和填充区域目前还存在一定的争议，有关于这方面的争议在这里不做相关阐述 ）
• 所有行框（line box）都直接包含在该框中
• 它是包含块的所有框的边框盒子（border-box），并且其边框盒子并不完全位于块开始（block-start）或内行开始（inline-start）填充边缘（padding）之外，通过将每个框投射到元素的平面上来实现转换，从而创建3D渲染上下文（3D rendering context）
• 上面所有框的可滚动溢出区域有一个前提，即可它们本身受具有 overflow:visible （它们本身不会捕获溢出），并且可滚动溢出尚未被剪切（例如 clip 或 contains ）

可滚动溢出矩形在框本身的坐标系统中始终是矩形，但由于 transform ，在其他坐标系统中可能是非矩形。这意味着滚动条有时会在实际上不需要的时候出现。

Overflow模块属性的划分

上一部分从概念上介绍了溢出的两大类型，其中可滚动溢出是我们较为熟悉的一种溢出。如果对于概念或理论上的理解较为无聊的话，我们可以来看看溢出模块中的属性划分，即我们在实际使用中会用的属性：

• 用于控制盒子可滚动或剪切的属