overflow：hidden竟然会失效

overflow：hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。

在编程中我们发现，有时即使使用了overflow：hidden，其子元素的超出部分也不会被剪裁掉。

我们从实例中来看：

样式：

运行结果：

如图，我们的子元素（child类）已明显超出其父元素（father类），而且father类设置了超出部分隐藏，但是可以看到已超出其父元素的子元素（红色部分）并没有被其父元素（黄色部分）剪裁掉。

而在正常情况下：

运行结果：

给其父元素设置相对定位并且超出部分隐藏，红色部分就会被黄色部分剪裁掉。

所以，一个绝对定位的元素，如果要使其父容器的overflow：hidden对其失效，我们只需要给其再包一个div（即其祖先元素），让这个div相对定位。那么它的父元素设置的超出部分隐藏将会失效，即不会被父元素剪裁。

其实overflow：hidden并没有真正失效。我们这样做其实是使这个子元素的包含块发生了变化，因为它是绝对定位的，会从内到外寻找第一个相对定位的div进行定位。在失效的例子中，我们没有给它的父元素相对定位，而是给其祖先元素相对定位，它的包含块其实就变成了祖先元素。父元素设置的超出部分隐藏就不会起作用了。

若给其父元素再加上相对定位，那么它的包含块就还是其父元素。overflow：hidden当然就不会失效了。