为什么我的浮动元素不在其父元素内

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在它上面（建立一个新的块格式化上下文）。