Question

在CSS中，overflow:hidden设置在父容器上，以允许它随浮动子项的高度扩展。

但与margin: auto ...

结合使用时，它还有另一个有趣的功能

如果PREVIOUS兄弟是浮动元素，它实际上会与它并置。也就是说，如果兄弟是float:left，那么带有float:none overflow:hidden的容器将显示在兄弟的右侧，没有换行符 - 就像它在正常流程中漂浮一样。如果前一个兄弟是float:right，那么容器将显示在兄弟的左侧。调整此容器的大小将准确显示它位于浮动元素之间的中心。假如你有两个先前的兄弟姐妹，一个float:left另一个float:right，容器将显示在两者之间的中心位置。

所以这是问题 ...

如何在不屏蔽儿童的情况下维护这种类型的布局？

在网上搜索，为我提供了如何clear:both和扩展容器的方法......但是我找不到任何替代解决方案来维持左/右前一个孩子居中。如果你创建容器overflow:visible，那么容器突然忽略了浮动元素的布局流程，并且在浮动元素的顶部显示为分层。

所以问题：

我必须让容器overflow:hidden保留布局......

我怎样才能让孩子们不被蒙面？我需要让孩子相对于容器外的父母绝对定位。

OR

我如何overflow:visible所以我绝对可以将一个孩子相对于容器外的父母定位... YET保留兄弟浮动状布局流？

Answer 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;

Answer 2

所有发布的答案都不适合我。但是，为子元素设置position: absolute确实有效。

Answer 3

这是一个老问题，但我自己也遇到过。

我有半解决方案，适用于前一个问题的情境（“儿童在溢出中可见：隐藏的父母”）

如果父div不需要是position：relative，只需将子样式设置为visibility：visible。

如果父div确实需要位置：相对，我发现显示孩子的唯一方法是位置：固定。幸运的是，这在我的情况下很适合我，但我认为它在其他人身上不起作用。

这是一个蹩脚的例子，只需发布到html文件中即可查看。

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

Answer 4

对于其他人，如果clearfix不能为您解决此问题，请为非浮动兄弟添加边距，该边距与浮动兄弟的宽度相同。

Answer 5

对于其他人，如果这不起作用，请尝试在需要滚动条的组件中的 vh 中指定高度。

.parent {
     overflow: overlay,
     height: 100vh
}

Answer 6

Kunal 的回答是正确的，但有一个语法错误，编辑它似乎不起作用。

<块引用>

对于其他人，如果这不起作用，请尝试在 vh 中给出高度需要滚动条的组件。

注意：此 CSS 功能是实验性的，未标准化，可能仅适用于 Webkit 浏览器。见https://caniuse.com/css-overflow-overlay

.parent {
     overflow: hidden;
}

.child {
     overflow: overlay;
     height: 100vh;
}

让孩子在溢出之外可见：隐藏的父母

6 个答案: