如何在溢位之外保留浮動子級的可見性：隱藏父級？

在Overflow:Hidden Parent 之外保留浮動子級的可見性

在CSS 中，overflow:hidden 屬性可以應用於父容器以確保它們垂直擴展以容納漂浮的兒童。然而，當與 margin:auto 結合使用時，此屬性也會表現出有趣的行為。

當具有 Overflow:hidden 和 margin:auto 的父容器與浮動元素同級時，它將出現在該元素附近。這意味著，如果同級容器向左浮動，父容器將被推向右側並在浮動元素之間居中。

雖然此行為在某些情況下很有用，但在某些情況下，您可能會遇到以下情況：希望保持此佈局而不屏蔽子元素。這可能是一個挑戰，因為溢位：可見會停用佈局保留效果，導致子元素被父容器覆蓋。

使用clearfix技術的解決方案：

為了解決這個問題，您可以利用clearfix技術，該技術可以實現“佈局保留”，而無需訴諸overflow :hidden。操作方法如下：

1. 使用以下CSS 樣式建立一個clearfix 類別：

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */</code>

2. 將clearfix 類別屬性加入父容器並刪除Overflow:hidden 。

透過應用clearfix 類，您可以維護所需的佈局，包括浮動元素的相對定位，同時確保子元素不被屏蔽。當您需要保留父容器外部元素的視覺層次結構和可訪問性時，此技術可以作為溢位：隱藏的合適替代方案。

以上是如何在溢位之外保留浮動子級的可見性：隱藏父級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！