div不根据内容调整高度答案

【问题标题】：Div not Adjusting Height Based on Contentsdiv不根据内容调整高度
【发布时间】：2017-10-25 20:47:52
【问题描述】：

我似乎无法弄清楚为什么我的 info-container div 不会根据其内容调整其高度。我里面确实有一个浮动 div，我认为它可能会导致问题，但我不完全确定。我有一个指向 jsfiddle 的链接，如果有帮助，您可以在其中查看 CSS 和一些 HTML。非常感谢任何帮助！

这是用于保存浮动和所有其他信息的信息容器 ID 的 CSS

    #info-container{
    position:relative;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
    margin-left:auto;
    margin-right:auto;
    background:#6F90A2;
    min-width:1000px;
    max-width:1000px;
    clear: both;
    height:auto;
}

http://jsfiddle.net/r35K4/

【问题讨论】：

标签： html css css-float height

【解决方案1】：

将overflow:auto; 添加到#info-container。

jsFiddle example

浮动子元素会将其从文档流中移除，并且父元素将折叠。通过添加溢出规则，恢复所需的行为。

【讨论】：

感谢您的快速响应和对花车的洞察力，您在现场！

【解决方案2】：

#info-container{
    overflow: auto;
}

【讨论】：

【解决方案3】：

您需要所谓的 CSS clearfix。这可以通过以下 CSS 实现。

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

Working Example

这将创建一个伪元素，强制包装器包装浮动的子元素。

这可以说是添加overflow 属性的更简洁的解决方案，因为溢出属性还有其他用途，并且根据具体情况可能会导致隐藏溢出或内部滚动条出现问题。

【讨论】：

【解决方案4】：

jsBin demo

创建一个 CSS 类：

.clear:before,
.clear:after {
  content:" ";
  display:table;
}
.clear:after {
  clear:both;
}

只需将其应用于您的

<div id="info-container" class="clear">

或包含您遇到问题的 Floated 元素的任何其他元素。

如果您想更简单，请使用

overflow : auto;

对于任何包含浮动子元素的父元素，如果你能这样做，因为它会变成一个溢出元素

【讨论】：