如何在保留版面的同時保持溢出隱藏容器中的元素可見性？

在溢出隱藏容器中保持元素可見性

在CSS中，在父容器上設定overflow:hidden可以讓它們根據高度擴展他們漂泊的孩子們但是，此功能存在局限性，特別是容器內子項的屏蔽。

當使用者想要保持具有浮動子項的容器的左/右居中，同時保留容器外部元素的可見性時，就會出現問題。使用溢位：可見可以消除遮蔽問題，但會破壞佈局流程。

解決方案 1：使用 Clearfix

解決方案是利用clearfix 技術，該技術可以有效地模擬溢出的佈局保留行為：隱藏而不屏蔽子項。 CSS 程式碼如下：

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

將clearfix 類別套用至父容器並刪除overflow:hidden。這可確保在子層級保持可見時保留佈局。

解決方案2：透過溢位可見保留浮動同級佈局

另一種方法是使用溢位：可見並使用絕對定位策略性地將子元素定位在容器外部。但是，要保留同級浮動佈局流，需要執行以下步驟：

1. 將子元素設定為絕對位置。
2. 根據下列內容計算子元素的正確位置父元素的寬度和兄弟元素的位置。
3. 隨著父元素大小的變化動態調整子元素的位置，以確保與兄弟元素對齊。

以上是如何在保留版面的同時保持溢出隱藏容器中的元素可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！