CSS浮动属性显示没有高度？

Question

我对CSS很新,所以,这可能看起来很傻:

在CSS中,我使用属性来float:left将内容定位到相邻元素,现在,我有一个容器用于所有具有float属性的元素.如何让父母元素根据它的内容调整它的高度？

HTML:

<div id="page">
<div id="side">
    <p>my sidebar</p>
</div>
<div id="content">
    <p>my content</p>
    <p>my content1</p>
    <p>my content2</p>
    <p>my content3</p>
</div>

​

CSS

/* the "border:3px solid #000;" are used to make the div border visble*/
#page{
position:relative;
width:400px;
background-color: #F4F0EC;
border:3px solid #000;
}
#side{

border:3px solid #000;
float:left;
}
#content{
float:left;
 border:3px solid #000;
}

与上面,<div id="page">看起来它的高度为0px ....我怎么让它扭曲内容？

因为我是CSS的新手,请解释我做错了什么,谢谢

小提琴:http://jsfiddle.net/AuSmP/

Answer 1

您可以overflow:hidden为其添加div #page允许其调整大小以适合其内容.

请参阅工作演示.

详细了解溢出属性.

或者你也可以添加<div class="clear"></div>然后CSS .clear{clear:both;}实现相同的功能.

见演示.