html - 列忽略其父级的高度

Question

问题是父母div应该尊重两列的文本height（#col1和#col2，每个使用float:left）。但是，父级的高度属性 ( #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>