Html CSS float属性不显示高度？

我对CSS相当陌生，因此，这可能看起来很愚蠢：

在CSS中，我使用属性to

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>

通过以上操作，

的高度看起来像是0px。。。。如何使其扭曲内容

由于我是CSS新手，请解释我做错了什么，谢谢

---

Fiddle:

您可以为您的

div#页面添加
溢出：隐藏
，这将允许它调整大小以适应其内容



或者，您也可以添加
，然后添加
CSS
.clear{clear:all；}
，以实现相同的效果

将位置从相对位置更改为绝对位置也可以帮助您解决问题

检查此项
这是您所期望的吗？
只需将float:left样式添加到#页面即可解决问题，或者您也可以在底部使用clear:tware
都德，我从未如此高兴地发现新的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;
}