首頁 >web前端 >css教學 >關於溢出隱藏（overflow:hidden）失效的原因

關於溢出隱藏（overflow:hidden）失效的原因

不言原創: 2018-06-28 10:07:4516526瀏覽

這篇文章主要介紹了關於溢出隱藏（overflow:hidden）失效的原因，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

項目中常常有同學遇到這樣的問題，現像是為元素設定了overflow:hidden，但超出容器的部分並沒有被隱藏，難道是設定的hidden失效了嗎？

其實看似不合理的現象背後都會有其合理的解釋。

我們知道，overflow屬性值有這幾種：

visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。
hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。
scroll：声明内容将被剪裁，但有可能出现滚动条来查看被剪裁掉的内容。滚动条出现的位置在inner border adge和outer padding adge之间。
auto：声明决策将依赖于客户端，优先使用scroll。

W3C標準中指明：
通常一個盒子的內容是被限制在盒子邊界之內的。但有時也會產生溢出，即部分或全部內容跑到盒子邊界之外。溢出將在滿足下列條件之一時出現：

1. 一个不换行的行元素宽度超出了容器盒子宽度。
2. 一个宽度固定的块元素放在了比它窄的容器盒子内。
3. 一个元素的高度超出了容器盒子的高度。
4. 一个子孙元素，由负边距值引起的部分内容在盒子外部。
5. text-indent属性引起的行内元素在盒子的左右边界外。
6. 一个绝对定位的子孙元素，部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

當溢出發生時，overflow屬性約定了容器盒子是否剪裁掉超出其內邊界的部分，並且決定是否出現滾動條來訪問被剪裁掉的內容。它會影響到元素所有內容的剪裁，但有個例外情況，即上面第6條所提到的：元素的子孫元素的包含塊（Containing blocks）是整個視窗（viewport）或是該元素的祖先元素，內容將不會被剪裁。包含塊是什麼呢？簡單的說，就是可以決定一個元素位置和大小的塊。通常一個元素的包含區塊由離它最近的區塊級祖先元素的內容邊界決定。但當元素被設定成絕對定位時，包含區塊由最近的position不是static的祖先元素決定。

看起來有點繞，讓我們來聽個簡單的故事吧。

html片段：

<p class=”ocean”>
    <p class=”land”>
        <p class=”joke”>
                Mrs. Smith couldn’t get her husband to exercise. 
                She asked Mrs. Jones what she should do. Jones replied, 
                “Tape the remote control between his toes.”
        </p>
    </p>
</p>

style:

p.ocean{
    position:relative;
    background-color:blue;
    width:120px;
    height:120px;
    }
p.land{
    width:100px;
    height:100px;
    background-color:red;
    overflow:hidden;
    }
p.joke{
    width:150px;
    height:110px;
    margin-top:30px;
    margin-left:30px;
    background-color:yellow;
    }

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

關於溢出隱藏（overflow:hidden）失效的原因

圖1：和諧的星球

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

p.joke{
    position:absolute;
    width:150px;
    height:110px;
    top:30px;
    left:30px;
    background-color:yellow;
    }

關於溢出隱藏（overflow:hidden）失效的原因

圖2：猖獗的段落

為什麼會這樣呢？這便是創造了上面提到過的第6個條件。當黃色段子變成position:absolute時，它的包含塊已由原來的紅色大地的內容邊界升級到了離它最近的position不是static的藍色海洋了。而海洋此刻對此還一無所知呢，自身沒有設定overflow:hidden屬性，導致黃色段子本該被裁剪的部分全部可見，不僅污染到海洋，還影響到整個星球，情況萬分火急啊。即使這時海洋設定上overflow:hidden，也只能將超出藍色海洋的黃色部分剪裁，就像圖3，海洋此時是手足無措啊。

關於溢出隱藏（overflow:hidden）失效的原因

圖3：無辜的海洋

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

p.ocean{
    position:relative;
    background-color:blue;
    width:120px;
    height:120px;
    }
p.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-color:yellow;
    }

所以說，hidden並沒有失效，而是有可能我們遇到的情況恰好滿足了第6個條件，使得元素的包含區塊發生了變化。在上面的故事中，也提到了在遇到‘hidden’失效的情況時，可以根據需要來改變元素的包含塊來達到正義的目的。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

關於溢出隱藏（overflow:hidden）失效的原因

相關文章