CSS 使孩子在溢出之外可见：隐藏的父母
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3387489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make child visible outside an overflow:hidden parent
提问by marknadal
In CSS the overflow:hiddenis set on parent containers in order to allow it to expand with the height of their floating children.
在 CSSoverflow:hidden中设置在父容器上，以允许它随着浮动子项的高度扩展。
But it also has another interesting feature when combined with margin: auto...
但当与margin: auto……结合时，它还有另一个有趣的功能。
If PREVIOUS sibling is a floating element, it will actually appear juxtapose to it. That is if the sibling is float:leftthen the container with float:none overflow:hiddenwill appear to the right of the sibling, no newline - just as if it was floating in the normal flow. If the previous sibling is float:rightthen the container will appear to the left of the sibling. Resizing this container will accurately show it centered inbetween the floating elements. Say if you have two previous siblings, one float:leftthe other float:right, the container will appear centered inbetween the two.
如果 PREVIOUS 兄弟是一个浮动元素，它实际上会与它并列出现。也就是说，如果兄弟是，float:left那么容器float:none overflow:hidden将出现在兄弟的右侧，没有换行符 - 就像它在正常流中浮动一样。如果前一个兄弟是，float:right则容器将出现在兄弟的左侧。调整此容器的大小将准确地显示它在浮动元素之间居中。假设您有两个以前的兄弟姐妹，一个float:left是另一个float:right，容器将出现在两者之间的中心。
So here's the problem...
所以问题来了……
How do I maintain that type of layout WITHOUT masking children?
我如何在不屏蔽孩子的情况下保持这种布局？
Googling all over the web gives me ways on how to clear:bothand expand a container... but I can't find any alternative solution to maintaining the left/right previous-child centering. If you make the container overflow:visiblethen the container suddenly ignores the layout flow of the floating elements and appears layered ontop of the floating element.
在网络上搜索谷歌给了我如何clear:both扩展容器的方法......但我找不到任何替代解决方案来保持左/右前一个子项居中。如果你制作了容器，overflow:visible那么容器会突然忽略浮动元素的布局流程，并在浮动元素的顶部出现分层。
So question:
所以问题：
I have to have the container overflow:hiddento preserve layout...
我必须有容器overflow:hidden来保留布局...
how can I make it so the children aren't masked? I need to have the child absolutely positioned relative to the parent outside the container.
我怎样才能让孩子们不被蒙面？我需要让孩子相对于容器外的父级绝对定位。
OR
或者
How do I overflow:visibleso I can absolutely position a child relative to the parent outside the container... YET preserve the sibling float-like-layout-flow?
我如何才能overflow:visible相对于容器外的父级绝对定位子级......但保留兄弟浮动式布局流？
采纳答案by Frexuz
You can use the clearfixto do "layout preserving" the same way overflow: hiddendoes.
您可以使用clearfix相同的方式进行“布局保留” overflow: hidden。
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */
add class="clearfix"class to the parent, and remove overflow: hidden;
将class="clearfix"类添加到父类，并删除overflow: hidden;
回答by reflexiv
Neither of the posted answers worked for me. Setting position: absolutefor the child element did work however.
发布的答案都不适合我。position: absolute但是，子元素的设置确实有效。
回答by Thomas Davis
This is an old question but encountered it myself.
这是一个老问题，但我自己遇到了。
I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")
我有针对前一个问题的半解决方案（“溢出中可见的儿童：隐藏的父级”）
If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.
如果父 div 不需要位置：相对，只需将子样式设置为可见性：可见。
If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.
如果父 div 确实需要位置：相对，我发现显示孩子的唯一方法是位置：固定。幸运的是，这在我的情况下对我有用，但我可以想象它在其他人中不起作用。
Here is a crappy example just post into a html file to view.
这是一个糟糕的例子，只是发布到一个 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>
回答by Walf
For others, if clearfix does not solve this for you, add margins to the non-floated sibling that is/are the same as the width(s) of the floated sibling(s).
对于其他人，如果 clearfix 不能为您解决此问题，请为与浮动兄弟姐妹的宽度相同的非浮动兄弟姐妹添加边距。
