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

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问题中列出了许多其他方法来实现这种效果（没有额外的标记）：

What methods of ‘clearfix’ can I use?

Answer 2

因为point of float允许您执行

之类的操作

Ed Eliot描述了一大堆different ways to make a container expand to contain it's floating children。我通常建议在其上设置overflow: hidden（以建立新的块格式化上下文）。