学生在项目中经常遇到这样的问题，现象是元素设置了overflow:hidden，但是超出容器的部分没有隐藏。设置的hidden失效了吗？
事实上，在看似不合理的现象背后会有合理的解释。
overflow属性值有以下几种：
visible：声明内容不会被剪裁。例如，内容可能会被渲染到容器外。
hidden：声明内容将被切割，而且不想使用滚动条来查看切割内容。
scroll：声明内容将被切割，但滚动条可以查看被切割的内容。滚动条出现在iner中 border adge和outer padding adge之间。
auto：声明决策将依赖于客户端，scroll优先考虑。
W3C标准中指明：
盒子的内容通常限制在盒子的边界内。但有时会产生溢出，即部分或全部内容跑到盒子边界外。当满足以下条件之一时，溢出就会出现：
1. 不换行元素的宽度超过了容器盒的宽度。
2. 一个宽度固定的块元素放在一个比它窄的容器盒里。
3. 一个元素的高度超过了容器盒的高度。
4. 由负边距值引起的子孙元素部分在盒子外面。
5. text-由indent属性引起的行内元素在盒子的左右边界之外。
6. 一个绝对定位的子孙元素，部分内容在盒子外。但是超出的部分并不总是被剪掉。子孙元素的内容不会被子孙元素及其包含块之间祖先元素的overflow设置所剪裁。
当溢出发生时，overflow属性约定了容器盒是否切割超过其内部边界的部分，并决定是否有滚动条来访问切割的内容。它会影响元素所有内容的剪裁，但有一个例外，即上述第六条提到的元素的子孙元素包含块（Containing blocks）是整个视窗（viewport）或者这个元素的祖先元素，内容不会被剪裁。包含块它是什么？简单地说，它可以决定一个元素的位置和大小。通常，一个元素的包含块是由最近块级祖先元素的内容边界决定的。但当元素被设置为绝对定位时，包含块由最近的position不是static的祖先元素决定。
看上去有点绕，让我们听一个简单的故事吧。
html片段：
- <div class=”ocean”>
- <div class=”land”>
- <p class=”joke”>
- funny jokes
- </p>
- </div>
- </div>
style:
- div.ocean{position:relative;background:blue;width:120px;height:120px;}
- div.land{width:100px;height:100px;background-color:red;overflow:hidden;}
- p.joke{width:150px;height:110px;margin-top:30px;margin-left:30px;background:yellow;}
上面的代码讲述了这样一个故事:蓝色的海洋里有一片红色的土地，红色的土地上有一个黄色的笑话。由于笑话风格的设置，其部分内容超过了红色土地。为了避免黄色笑话污染蓝色海洋，红色大地警惕地为自己设置了overflow:hidden;这样，超越大地的黄色部分就被剪掉了。我们看到的将是这样一个和谐的场景，如图1所示：
如果一切都这么有理有序，世界就不会太平了。没过多久，黄色笑话觉得自己的显赫身份不应该被红色大地控制，于是绞尽脑汁把自己变成了绝对的定位，突然摆脱了大地的束缚，如图2：
p.joke{position:absolute;width:150px;height:110px;top:30px;left:30px;background:yellow;}
为什么会这样？这就是上面提到的第六个条件。当黄色段子变成position时:当absolute时，它的包含块已经从红色大地的原始内容边界升级到最近的position，而不是static的蓝色海洋。而海洋此刻对此一无所知，自己也没有设置overflow:hidden属性导致黄色笑话应该被切割的所有部分都可见，不仅污染了海洋，还影响了整个星球。情况非常紧急。即使在这个时候，海洋设置overflow:hidden，只能剪掉超过蓝色海洋的黄色部分，就像图3一样，海洋此时不知所措。
俗话说，魔高一尺高一丈，解铃还得系铃人。红色的大地怎么会愿意跑出笑话呢？怎么说大地终究是笑话的祖先元素，怎么能甘心随着笑话胡作非为呢？因此，大地历尽千辛万苦，寻找秘籍，在自己的风格中加入position:relative属性，将段子的包含块改为大地来决定。这段话乖乖地被关起来了。星球似乎又回到了原来的状态。
- div.ocean{position:relative;background-color:blue;width:120px;height:120px;}
- div.land{position:relative;width:100px;height:100px;background-color:red;overflow:hidden;}
- p.joke{position:absolute;width:150px;height:110px;top:30px;left:30px;background:yellow;}
因此，hidden并没有失败，但有可能我们遇到的情况恰好满足了第六个条件，改变了元素的包含块。上面的故事也提到了遇到‘hidden当出现故障时，元素的含块可以根据需要改变，以达到正义的目的。
source:阿里巴巴(中文站)UED
