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

Question

在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？

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;