关于overflow:hidden失效问题

overflow:hidden 中文是溢出隐藏的意思。但是在使用的过程中我们发现并不是所有的情况都适用。

这是我们对其属性的模糊理解所带来的问题

css规范中有这样一段话
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可以剪裁超出块状元素之外的元素。除非超出元素的包含块是整个视区或是该overflow元素的祖先元素。

包含块： 一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不包含，则其包含块是body元素。

所以根据规范中的解释：
1、当超出元素的包含块是整个视区时，overflow:hidden不能隐藏溢出的元素。
（当所要隐藏的元素使用绝对定位absolute，并且所要隐藏的元素的祖先元素包括父元素都没有使用定位时overflow:hidden失效。）
2、当超出元素的包含块是设置了overflow元素的祖先元素时，overflow:hidden不能隐藏溢出的元素。

演示：

1、失效的第一种情况：

要溢出隐藏的元素son设置了绝对定位absolute，而他的祖先元素都没有使用定位时，overflow:hidden失效。
2、失效的第二种情况：

要溢出隐藏的元素son设置了绝对定位absolute，它的包含块是overflow元素的父元素，所以overflow:hidden失效。
3、正常溢出隐藏的情况：

要溢出隐藏的元素不满足超出元素的包含块是整个视区或是该overflow元素的祖先元素。