為什么我的浮動元素不在其父元素內

Question

所以基本上我有這個包裝div，它里面的所有元素都是浮動元素。 唯一的問題是包裝器div的邊框不包含浮動元素。 例：

<div id = "wrapper>
   <div id = "content"></div>
</div>

繼承人css：

#wrapper
{
   width:         1000px;
   margin-left:   auto;
   margin-right:  auto;
   border:        1px solid;
} 

#content
{
   border:        1px solid;
   width:         850px;
   height:        400px;
   display:       block;
   float:         left;
}

基本上#content不包含在#wrapper的邊框內，但仍然在其中對齊，為什么會這樣？

Answer 1

你需要“清除”容器div。

在計算容器的尺寸時不考慮浮動元素，但是有幾種解決方法可以獲得您想要的東西。

最簡單的

只需添加像這樣的div作為容器div中的最后一個子節點：

<div style="clear:both"></div>

正如@Pekka評論，在這個SO問題中列出了許多其他方法來實現效果（沒有額外的標記）：

我可以使用哪種'clearfix'方法？

Answer 2

因為浮點數是允許你做的事情

埃德艾略特描述了大量不同的方法，使容器擴展，以包含它的漂浮兒童 。 我通常建議設置overflow: hidden在它上面（建立一個新的塊格式化上下文）。