css - 为什么子DIVS的内容会影响子身高而不影响父身高？

Question

           <div id="container">
               <div id="sidebar-left">
                  //some content 
               </div>
               <div id ="content">
                //some content
               </div>
            </div>

以上面的一段代码为例。侧边栏中的内容和内容 div 将它们拉伸并赋予它们长度 - 但究竟为什么它们的父 div“容器”也没有被拉伸并赋予长度？如果有可能，我该如何实现？

http://jsfiddle.net/QA8Z7/6/

Answer 1

我要在这里暗中尝试一下，猜测您已经float设置了sidebar-leftand content，并想知道为什么containerdiv 不包含它们？如果是这种情况，有多种方法可以“解决”这个问题；这个问题非常详细地讨论了各种选项。

编辑：刚刚看到我在写这篇文章的时候已经弄清楚了，哦，好吧。overflow尽管如此，了解问题的根本根源以及在容器上设置的一些替代方法可能会很有用。

Answer 2

我不确定这是为什么，但如果你这样做

#container {
    background-color: red;
    overflow:hidden;
}

然后它工作。希望这可以帮助！

Answer 3

总是在浮动一些 div 或溢出隐藏在父 div 中后使用 clear 类

<div id="container">
      <div id="sidebar-left">some content </div>
      <div id="content">some content</div>
      <div style="clear:both"></div>
    </div>