说到overflow对于CSSer而言并不会陌生，用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取，另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是，我们今天要说的灵活overflow。

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

溢出是CSS中的另一个重要的概念。从 图解CSS系列 的《CSS 盒模型》和《元素尺寸的设置》中可以得知，Web上的内容都是放置在一个具有一定大小的盒子中。在某些情况下，盒子大小是有限制的，有可能内容会超出这些盒子，在 CSS 中，这种现象被称为 溢出。而且 W3C 的CSS工作小组专门为溢出划为一个独立的模块。在这一章中，将和大家一起探讨 CSS 溢出模块相关的话题。比如，什么是溢出？什么情况下会导致溢出？如何使用CSS来控制溢出等等。

在第一部分主要和大家聊了CSS溢出的概念和理论相关的，在第一部分主要以实例，问题排查和常见溢出问题三个部分展开。在构建 Web 页面或应用的时候，总是避免不了给容器设置一个具有约束性的尺寸，有的时候，因为容器没有足够的空间来容纳内容，从而造成内容溢出容器，严重的会打破 Web 布局，干扰页面的美观。为了让这些现象能不干扰 Web 布局，所以需要CSS溢出特性。除此之外，我们在构建一些Web组件和实现一些UI效果，也需要依赖CSS溢出特性。那么接下来，我们来看一些溢出相关的案例。