包含其他div的div沒有合適的高度

Question

我有一個'frame'包含兩個div，它們分別在左邊和右邊對齊。不幸的是，主div沒有適合身高的內部divs的高度。

下面是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:auto你的CSS規則#frm把背景回來， 「含有」 漂浮的孩子：

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

jsFiddle example

Answer 2

overflow:hidden;將給予高度#frm

嘗試：

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

DEMO here.

OR

清除浮動：

HTML：

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

CSS：

.clr{clear:both;} 

DEMO here.

Answer 3

我認爲這工作得很好：

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

#a { 
    background: blue; 
    width: 50%; 
    float: left;  
} 

#b { 
    background: green; 
    width: 50%; 
    float: right; 
}