列忽略它的父级的高度

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>