增加包含浮动嵌套 div 的父 div 的高度

Posted 2023-02-22

【中文标题】增加包含浮动嵌套 div 的父 div 的高度

【英文标题】：Grow height of parent div that contains floating nested divs

【发布时间】：2012-03-16 19:27:40

【问题描述】：

我似乎无法根据其漂浮的孩子divs 自动增加父母 div 的身高。所有的孩子都是浮动的，水平占用空间，然后换行到下一行。浮动子项的数量可能会发生变化，并且父项必须自动调整其高度。 （父 div 用作所有浮动 divs 的背景）。在父div下方还有第二个div需要下推，使其位于浮动divs下方。

解决方案在 IE 中运行非常重要。

【参考方案1】：

如果父容器只有浮动子容器，它将没有高度。将以下 CSS 添加到父容器应该会有所帮助：

.parent 
    overflow:hidden;
    width: 100%;

阅读本文了解更多信息：http://www.quirksmode.org/css/clearing.html。

【讨论】：

这可行，但如果您的元素还没有设置“显示：块”，您可能还需要该设置。但是，下面描述的 clearfix 技术绝对是首选：如果你有例如溢出：隐藏将不起作用。任何需要溢出的下拉菜单！

虽然我用的是同样的东西，但是当我们需要一些外部的内容时，我们如何实现同样的效果（意思是overflow: visible;）？

这太棒了。但是如何它是如何工作的？链接的页面并没有真正的帮助。

【参考方案2】：

你可以插入一个 div 来清除最后一个孩子之后的浮动。

HTML：

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

小提琴：http://jsfiddle.net/Rc5J8/

【讨论】：

没有更好的解决方案。现在我必须添加一个空的div，它看起来像糟糕的 HTML。

将类 clear fix 应用于浮动元素并尝试以下 clearfix 类。 ***.com/questions/8554043/what-is-clearfix

如果您要对 div 中的元素使用 position:sticky，这就是您需要的答案，如果您使用 overflow:hidden/auto 方法，这将不起作用

【参考方案3】：

你需要clear浮动元素的高度，他们的父母会崩溃。

当前接受的答案是正确的，但是通过将 the clearfix hack 或 overflow: hidden 应用于包装父元素来清除浮动通常是一个更好的主意，以便边距继续按预期工作，并摆脱空 HTML元素。

overflow-方法：

CSS：

.wrap  overflow: hidden 
.box   float: left; 

标记：

<div class="wrap">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

clearfix-方法，如上链接：

CSS：

.cf:before,
.cf:after 
    content: " ";
    display: table;


.cf:after  clear: both; 
.cf  *zoom: 1; 

.box  float: left; 

标记：

<div class="wrap cf">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

【讨论】：

所以overflow:hidden 是在容器没有固定高度时使容器增长以适应其浮动子项的方式。最后，这是overflow:auto 的替代方案，它只应在容器具有固定高度时使用。感谢overflow:hidden 提示。不幸的是，虽然它有效，但我找不到可以支持它的 W3C 参考。

【参考方案4】：

你应该在包含的 div 上使用 clearfix 技术

http://www.webtoolkit.info/css-clearfix.html

这消除了添加额外标记的需要。

【参考方案5】：

在父元素上添加overflow css 属性将解决问题（不需要一个空且丑陋的 div 元素来清除浮动）：

.parentelement 
    overflow:auto;
    display: block;
    width: 100%;

我添加了 display 和 width 属性，因为某些浏览器需要定义这些属性。

【参考方案6】：

您需要对父级应用 clearfix，因为浮动从文档流中移除，并且不会自动为父级的内容添加任何高度。 Clearfix 指示父级扩展到足够高的高度以清除其最后一个浮动的子级。 This method 非常成熟，可以跨浏览器运行。