css - 当高度为 :auto 时父 div 不出现

Question

我有两个父 div，contenttop 和 contentbottom。我已将两者都设置为 width:100% 和 height:auto (我希望它们基于它们包含的 div 是流畅的)在这两个 div 中，我还有两个 div:

#col1, #col2, #col3, #col4
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

它们也被设置为流动的，即设置为其中任何文本的大小。

我遇到的问题是 contenttop 和 contentbottom div 不显示，除非我设置了特定的高度。 #col div 行为正确，但我的内容 div 的背景颜色没有出现。

这里发生了什么？有解决办法吗？

这是完整的 CSS:

body
{
    background-color:aquamarine;
}

p, p.maintextcontent, h1, h2, h3, h4, h5, h6
{
    margin:0;
    padding:0;
}

#contenttop
{
    position:relative;
    width:100%;
    height:auto;
    background-color:brown;
    margin:0;
    padding:0;
}

#col1, #col2
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

#contentbottom
{
    clear:both;
    position:relative;
    width:100%;
    height:auto;
    background-color:#000000;
    margin:0;
    padding:0;
}

#col3, #col4
{
    position:relative;
    width:45.5%;
    margin: 0 0 10px 3%;
    padding:0;
    display:inline;
    float:left;
    background-color:yellow;
}

谢谢

Answer 1

那是因为内容(#col1 等)是 float 的。这些使容器不具有高度。一种常见的解决方案是将此规则添加到您的容器中(#contenttop、#contentbottom):

overflow:hidden;

看看这个简化的 fiddle :http://jsfiddle.net/w2DrF/