不根据内容调整高度

Question

我似乎无法弄清楚为什么我的信息容器div不会根据其内容调整其高度。 我确实有一个浮动div，我认为它可能导致问题，但我不完全确定。 我有一个链接到jsfiddle，你可以看到CSS和一些HTML，如果它有帮助。 任何帮助是极大的赞赏！

这是保存float的信息容器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/

Answer 1

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

jsFiddle例子

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

Answer 2

#info-container{
    overflow: auto;
}

Answer 3

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

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

工作实例

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

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

Answer 4

jsBin演示

创建一个CSS类：

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

并简单地将它应用到你的

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

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

---

如果您想更简单，请使用

 overflow : auto; 

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