在溢出:隱藏容器中保留子級可見性
在CSS中,overflow:hidden屬性隱藏容器內溢出的內容。然而,當應用於流動兒童的父母時,就會產生有趣的效果。容器會自動將自身與其浮動同級元素對齊,從而建立一個佈局,其中浮動元素的父元素與其並列顯示。
問題陳述:
挑戰在於維護這樣的佈局沒有隱藏孩子。透過使容器溢出:可見,容器會忽略浮動元素的流動,出現在它們的頂部。
解決方案:
要克服這個問題,請利用「清除修復」技術。透過將「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>
這種方法有效地「清除」浮動元素,同時保留其佈局,從而允許父級容器將其自身與它們相鄰對齊,而不遮蓋其子項。
以上是如何防止CSS中隱藏浮動子項溢出:隱藏?的詳細內容。更多資訊請關注PHP中文網其他相關文章!