列忽略其父母的身高

Question

問題是父母div應該尊重兩列（#col1和#col2，均使用float:left）的文字height。然而，父母的身高屬性（#content）的行爲就像寫在裏面沒有文字。

代碼：http://jsfiddle.net/Arkl1te/UWNaT/

我可以插入一個固定的高度，但它不應該這樣的工作：高度應該有一個「靈活」的價值，甚至文本。

Answer 1

隨着孩子們浮動，你有兩個選擇：

添加overflow: hidden;父尊重兒童的身高：

#content{ 
    overflow: hidden; 
} 

添加一個空元素與clear:both的最新元素：

<div id="content"> 
<p id="col1">...</p> 
<p id="col2">...</p> 
<div style="clear:both;"></div> 
</div>