overflow:hidden真的失效了嗎

我們知道，overflow屬性值有這幾種：
visible：聲明內(nèi)容不會(huì)被剪裁。比如內(nèi)容可能被渲染到容器外面。
hidden：聲明內(nèi)容將被剪裁，并且也甭想使用滾動(dòng)條來(lái)查看剪裁掉的內(nèi)容。
scroll：聲明內(nèi)容將被剪裁，但有可能出現(xiàn)滾動(dòng)條來(lái)查看被剪裁掉的內(nèi)容。滾動(dòng)條出現(xiàn)的位置在inner border adge和outer padding adge之間。
auto：聲明決策將依賴于客戶端，優(yōu)先使用scroll。

W3C標(biāo)準(zhǔn)中指明：
通常一個(gè)盒子的內(nèi)容是被限制在盒子邊界之內(nèi)的。但有時(shí)也會(huì)產(chǎn)生溢出，即部分或全部?jī)?nèi)容跑到盒子邊界之外。溢出將在滿足下列條件之一時(shí)出現(xiàn)：
1. 一個(gè)不換行的行元素寬度超出了容器盒子寬度。
2. 一個(gè)寬度固定的塊元素放在了比它窄的容器盒子內(nèi)。
3. 一個(gè)元素的高度超出了容器盒子的高度。
4. 一個(gè)子孫元素，由負(fù)邊距值引起的部分內(nèi)容在盒子外部。
5. text-indent屬性引起的行內(nèi)元素在盒子的左右邊界外。
6. 一個(gè)絕對(duì)定位的子孫元素，部分內(nèi)容在盒子外。但超出的部分不是總會(huì)被剪裁。子孫元素的內(nèi)容就不會(huì)被子孫元素和其包含塊之間的祖先元素的overflow的設(shè)置所剪裁。

當(dāng)溢出發(fā)生時(shí)，overflow屬性約定了容器盒子是否剪裁掉超出其內(nèi)邊界的部分，并且決定是否出現(xiàn)滾動(dòng)條來(lái)訪問(wèn)被剪裁掉的內(nèi)容。它會(huì)影響到元素所有內(nèi)容的剪裁，但有個(gè)例外情況，即上面第6條所提到的：元素的子孫元素的包含塊（Containing blocks）是整個(gè)視窗（viewport）或是該元素的祖先元素，內(nèi)容將不會(huì)被剪裁。包含塊是什么呢？簡(jiǎn)單的說(shuō)，就是可以決定一個(gè)元素位置和大小的塊。通常一個(gè)元素的包含塊由離它最近的塊級(jí)祖先元素的內(nèi)容邊界決定。但當(dāng)元素被設(shè)置成絕對(duì)定位時(shí)，包含塊由最近的position不是static的祖先元素決定。

看起來(lái)有點(diǎn)繞，讓我們來(lái)聽(tīng)個(gè)簡(jiǎn)單的故事吧。
html片段:

style:

上面的代碼講述的是這樣一個(gè)故事：藍(lán)色的海洋里有塊紅色的大地，紅色大地內(nèi)有個(gè)黃色的段子。由于段子樣式的設(shè)置，它的部分內(nèi)容超出了紅色大地。為避免黃色段子污染到藍(lán)色海洋，紅色大地警惕的為自己設(shè)置了overflow:hidden;這樣超出大地的黃色部分就被剪掉了，我們看到的將是這樣一派和諧景象，如圖1：

圖1：和諧的星球

如果事物都是這樣有理有序，天下可不就太平了。沒(méi)多久，黃色段子覺(jué)得憑自己的顯赫身份不該受紅色大地的控制，于是絞盡腦汁將自己變改成了絕對(duì)定位，一下子就擺脫了大地的束縛，如圖2：

圖2：猖獗的段子

為什么會(huì)這樣呢？這便是創(chuàng)造了上面提到過(guò)的第6個(gè)條件。當(dāng)黃色段子變成position:absolute時(shí)，它的包含塊已由原來(lái)的紅色大地的內(nèi)容邊界升級(jí)到了離它最近的position不是static的藍(lán)色海洋了。而海洋此刻對(duì)此還一無(wú)所知呢，自身沒(méi)有設(shè)置overflow:hidden屬性，導(dǎo)致黃色段子本該被裁剪的部分全部可見(jiàn)，不僅污染到海洋，還影響到整個(gè)星球，情況萬(wàn)分火急啊。即使這時(shí)海洋設(shè)置上overflow:hidden，也只能將超出藍(lán)色海洋的黃色部分剪裁，就像圖3，海洋此時(shí)是手足無(wú)措啊。

圖3：無(wú)辜的海洋

俗語(yǔ)說(shuō)的好，魔高一尺道高一丈，解鈴還須系鈴人。紅色大地怎就甘心段子跑出去呢。怎么說(shuō)大地終歸是段子的祖先元素，怎么能甘心由著段子胡作非為呢。于是，大地歷盡千辛，尋得秘籍，在自己的樣式中添加position:relative屬性，將段子的包含塊又改成了大地來(lái)決定。這下段子就乖乖的被關(guān)起來(lái)了。星球看起來(lái)又回到了最初的狀態(tài)。

所以說(shuō)，hidden并沒(méi)有失效，而是有可能我們遇到的情況恰好滿足了第6個(gè)條件，使得元素的包含塊發(fā)生了變化。上面的故事中，也提到了在遇到‘hidden’失效的情況時(shí)，可以根據(jù)需要來(lái)改變?cè)氐陌瑝K來(lái)達(dá)到正義的目的。