小编典典

使子项在溢出之外可见:隐藏的父级

css

在CSS中,overflow:hidden在父容器上设置,以使其随其浮动子代的高度扩展。

但是,当与margin: auto… 结合使用时,它还具有另一个有趣的功能。

如果上一个同级是一个浮动元素,它将实际上并列出现。也就是说,如果同级float:left容器是,则容器float:none overflow:hidden将显示在同级容器的右侧,没有换行符-
就像它在正常流中浮动一样。如果先前的兄弟姐妹是float:right容器,那么容器将出现在兄弟姐妹的左侧。调整此容器的大小将准确地显示它在浮动元素之间的中心。说,如果你有两个以前的兄弟姐妹,一个float:left其他float:right,容器将出现在中心插图中的两项。

所以这是 问题所在

如何在不遮盖孩子的情况下保持那种布局?

在整个网络上进行谷歌搜索为我提供了如何clear:both扩展和扩展容器的方法…但是我找不到任何其他解决方案来保持左/右前一个孩子居中。如果您制作容器,overflow:visible则容器会突然忽略浮动元素的布局流程,而是分层显示在浮动元素的顶部。

所以 问题

我必须有一个容器overflow:hidden来保留布局…

我怎样才能做到不让孩子蒙面?我需要让孩子相对于容器外部的父对象绝对定位。

要么

我如何overflow:visible才能绝对地将一个孩子相对于其父对象放置在容器之外…还可以保留同级的float-like-layout-
flow?


阅读 297

收藏
2020-05-16

共1个答案

小编典典

您可以使用clearfix进行相同的“布局保留” overflow: hidden操作。

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

class="clearfix"类添加到父级,然后删除overflow: hidden;

2020-05-16