使孩子在溢出之外可见：隐藏的父母

100

在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才能绝对地将一个孩子相对于其父对象放置在容器之外...还可以保留同级的float-like-layout-flow？

— 马克纳达尔
source

86

您可以使用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;

— 弗雷祖兹
source

嗯！聪明，我现在正在尝试。我现在得到的是生成的内容行为正确，被保留在布局流中，但是父级仍然会忽略它，并在浮动元素的顶部放置图层。但是，这是一个非常好的主意，我将对其进行更多研究，看看是否可以使其表现正确，然后重新投票。谢谢：）。

— marknadal 2012年

@ user1671639您的示例并不真正适用于clearfix。您还需要其他东西，所以我建议您发布一个有关您的问题的问题。

— Frexuz 2013年

这根本无法以相同的方式工作overflow:hidden。对父div应用clearfix不允许将所有子组件“包含”在与父div相同的高度内。

— Khom Nazid

11

所发布的答案均不适合我。但是，设置position: absolute子元素确实有效。

— 自反
source

18

但是，如果父DIV超出了父DIV（已溢出：隐藏）的边界，它是否会屏蔽掉它？

— marknadal

9

只要父对象没有position：relative，Afaik就不会这样做。然后，相对于第一个定位（非静态）的祖先元素定位孩子，将其从常规（父代）dom流中移除。

— Pim Schaaf 2013年

如果父级确实具有position：relative并且不需要它，则可以将其设置为position：unset。

— yeahlad

是的，如果它position: fixed相对于父对象之外的对象具有绝对位置或相对位置visibility: hidden，则它将可见。但是，您通常需要（想要）将其相对于父级放置，以使其更健壮地进行代码更改。那么，这些解决方案是不可替代的。

— ArneHugo

10

这是一个老问题，但我自己遇到了。

我有一个半解决方案，可以解决前一个问题的情况（“溢出时可见的孩子：隐藏的父母”）

如果父div不需要为position：relative，则只需将子样式设置为visible：visible。

如果父div确实需要为position：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>

— 托马斯·戴维斯
source

这是一个糟糕的示例，只是发布到html文件中进行查看。<code> <div style =“背景：＃ff00ff；溢出：隐藏；宽度：500px；高度：500px；位置：相对；”> <div style =“背景：＃ff0000;位置：固定；顶部：10px；左侧：10px;“> asd <div style =”背景：＃00ffff;宽度：200px；溢出：可见；位置：绝对；可见性：可见；清除：两者；高度：1000px；顶部：100px；左侧：10px;“> a </ div> </ div> </ div> </ code>

— 托马斯·戴维斯

4

感谢试图回答，但这并不工作，因为固定的位置，相对于视元件自动定位，这意味着它不会与父移动。实际上，如果您有滚动页面，则滚动时页面将保持在10px，10px。

— marknadal 2011年

“如果父div确实需要为position：relative，那么我发现向孩子展示的唯一方法就是position：fixed。” 感谢那。我有一个弹出窗口帮助气泡，即使父窗口溢出，它也需要溢出：滚动。我最终得到一个绝对div，一个相对的内部，然后是一个固定的内容区域。

— JackMorrissey'3

谢谢，对我有用。我有一个位置相对的父母，这是必需的，因为它的位置是使用设置的left。使用margin-left相反会达到相同的效果，因此我不再需要使用相对位置。

— Felipe Castro 2015年

1

对于其他人，如果clearfix无法为您解决此问题，请向非浮动同级中添加与浮动同级的宽度相同的边距。

— 沃尔夫
source