包含其他div的Div没有合适的高度

Question

我有一个包含两个div的'frame',它们分别在左边和右边对齐.不幸的是,主要div没有适当的高度来使内部div.

这是HTML:

<div id="frm">
   <div id="a">aaa<br>aaa</div>
   <div id="b">bbb</div>
</div>

和CSS:

#frm {
    background: red;
    width: 100%;
    height: auto;
}

#a {
    background: blue;
    float: left;    
}

#b {
    background: green;
    float: right;
}

这是JsFiddle:http://jsfiddle.net/mPH4H/

我应该看到一个红框,但没有.

Answer 1

浮动元素将从文档流中删除,因此父容器认为它内部没有任何内容.您可以添加overflow:autoCSS规则#frm以使背景返回并"包含"浮动的子项:

#frm {
    background: red;
    width: 100%;
    height: auto;
    overflow:auto;
}

jsFiddle例子