在溢位中實現兄弟居中而不屏蔽子元素:隱藏父元素
在CSS 中,overflow:hidden 屬性通常用在父元素上容器以適應漂浮兒童的高度。然而,當與 margin:auto 結合使用時,它也會產生有趣的效果。
當具有 Overflow:hidden 和 margin:auto 的容器有一個浮動的前一個同級容器時,它會出現在浮動元素附近。這允許多個浮動同級元素之間居中放置。
但是,如果子級需要在容器外部可見而不遮蓋浮動元素,則此佈局可能會被破壞。使容器溢出:可見的傳統方法會忽略浮動佈局,而清除:兩者和展開容器會破壞同級居中。
使用 Clearfix 的解決方案
到保持居中佈局,同時允許子元素在容器外部可見,可以使用clearfix方法。透過將clearfix類別新增至父級並刪除overflow:hidden,可以保留佈局而不屏蔽子級。
clearfix的CSS如下:
.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* IE < 8 */
以上是以下是一些標題選項,可以使用問題格式並強調問題/解決方案: 直接、簡潔: * 如何在 CSS 中將兄弟姐妹居中而不屏蔽子代? * 我該如何預防的詳細內容。更多資訊請關注PHP中文網其他相關文章!