让孩子在溢出之外可见：隐藏的父级
在CSS中， overflow:hidden被设置在父容器上，以允许它随着它们的浮动子元素的高度而扩展。
但它也有另一个有趣的function，结合margin: auto …
如果以前的兄弟姐妹是一个浮动元素，它实际上会与它并列。 这就是说，如果兄弟是float:left那么带有float:none overflow:hidden的容器将出现在兄弟右侧，而不是换行 – 就像在正常stream程中漂浮一样。 如果前面的兄弟是float:right那么容器将出现在兄弟的左边。 调整此容器的大小将准确显示它在浮动元素之间居中。 说如果你有两个兄弟姐妹，一个float:left另一个float:right ，容器将出现在两者之间的中心。
所以这是问题
如何保持这种布局而不掩盖孩子？
在网上search，让我知道如何clear:both和扩大一个容器…但我找不到任何其他的解决scheme来维持左/右先前孩子居中。 如果你让容器overflow:visible那么容器突然忽略浮动元素的布局stream，并出现在浮动元素的顶部。
所以问题 ：
我必须有容器overflow:hidden以保持布局…
我怎么能这样做，让孩子们不被掩盖？ 我需要让孩子完全相对于容器外的父母定位。
要么
我如何overflow:visible所以我可以绝对定位一个孩子相对于容器之外的父母…是继续保持兄弟般的浮动式布局stream？
你可以使用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;
没有任何发布的答案为我工作。 设置的position: absolute的子元素做了工作。
这是一个古老的问题，但我自己也遇到过。
我有半解决scheme的前一个问题的情况（“儿童可见溢出：隐藏的父母”）
如果父div不需要是position：relative，只需将children的样式设置为visible：visible。
如果父母的职位确实需要职位：亲戚，唯一可能的办法是find孩子的位置：固定。 这在我的情况下很幸运，但我想可能不会在别人的工作。
这里是一个蹩脚的例子只是张贴到一个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>
对于其他人，如果clearfix没有为你解决这个问题，可以给非浮动的兄弟姐妹添加边际，这个浮动的兄弟姐妹的宽度与浮动的兄弟姐妹的宽度相同。
