CSS浮動屬性顯示沒有高度？

Question

我是相當新的CSS，所以，這可能都看傻了：

在CSS中，我使用的財產，以float:left到位置的內容留到鄰近的元素，現在，我對所有的元素的容器具有浮動屬性。我如何讓父母的元素根據它的內容調整它的高度？

的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">看上去像是有0像素的高度....我怎麼做它扭曲的內容??

，因爲我是新來的CSS，請解釋一下我做錯了，感謝

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

Answer 1

您可以爲div #page，這將允許它調整大小以適應其內容添加overflow:hidden。

See Working Demo.

Learn more about overflow property.

另外，您還可以添加<div class="clear"></div>，然後CSS.clear{clear:both;}來實現相同的。

See Demo.

Answer 2

相對於絕對的換位也可以幫你
入住這JSFiddle Demo

Answer 3

這是你所期望的？ http://jsfiddle.net/AuSmP/4/ 只是增加浮動：左側風格到#page將修復技巧，或者你也可以使用清除：在底部