使浮动的孩子在溢出之外可见：隐藏的父母

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 以保留布局…

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

或者

我如何 overflow:visible 这样我就可以绝对地将一个孩子相对于容器外的父级定位……但保留兄弟浮动式布局流？

原文由 marknadal 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;

原文由 Frexuz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

我有适用于前一个问题的半解决方案（“溢出中可见的孩子：隐藏的父母”）

如果父 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>

原文由 Thomas Davis 发布，翻译遵循 CC BY-SA 3.0 许可协议