使浮动子项在溢出之外可见：隐藏父项

在 CSS 中overflow:hidden设置在父容器上，以便使其能够随着浮动子容器的高度而扩展。

但与它结合使用时，它还有另一个有趣的功能margin: auto...

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

所以这是problem...

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

谷歌搜索整个网络给了我如何clear:both并展开一个容器...但我找不到任何替代解决方案来维持左/右前一个子项居中。如果你制作容器overflow:visible然后容器突然忽略浮动元素的布局流程并出现在浮动元素之上。

So question:

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

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

OR

我如何overflow:visible所以我绝对可以将子级相对于容器外的父级定位...还保留同级浮动式布局流吗？

您可以使用clearfix以同样的方式进行“布局保留”overflow: hidden does.

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

add class="clearfix"类到父级，并删除overflow: hidden;