Div根据内容不自动调整高度

Question

我似乎无法弄清楚为什么我的信息容器 div 不会根据其内容调整高度。我在其中放置了一个浮动 div，我认为这可能是问题的原因，但我不完全确定。如果有帮助的话，我提供了一个链接到 jsfiddle 的页面，您可以在其中查看 CSS 和一些 HTML。非常感谢任何帮助！

这里是 info-container ID 的 CSS，包含 float 和其他所有信息：

    #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/

- Tyharo

Answer 1

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

通过浮动子元素，将其从文档流中删除，父元素将会崩溃。通过添加 overflow 规则，可以恢复所需的行为。 jsFiddle 示例

- j08691

---

感谢您的快速回复和对浮点数的见解，您说得很准确！ - Tyharo

Answer 2

#info-container{
    overflow: auto;
}

- aniskhan001

Answer 3

您需要使用CSS清除浮动（CSS clearfix）。可以通过以下CSS实现。

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

工作示例

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

这可能是更干净的解决方案，比添加overflow属性更好，因为溢出属性有其他用途，并且根据情况可能会导致隐藏溢出或内部滚动条问题。

- Alexander O'Mara

Answer 4

jsBin演示

创建一个CSS类：

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

并将其简单应用于您的

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

或者对于包含你遇到问题的浮动元素的任何其他元素进行操作。

---

如果你想要更简单的方法，使用

overflow : auto;

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

- Roko C. Buljan