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

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才能绝对将一个孩子相对于容器外的父母定位... 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确实需要位置:relative,我发现显示孩子的唯一方法是position:fixed.幸运的是,这在我的情况下很适合我,但我想它在其他人身上不会起作用.

这是一个蹩脚的例子,只需发布​​到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>