在溢出中实现兄弟居中而不屏蔽子元素:隐藏父元素
在 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中文网其他相关文章!