为什么我的浮动元素不在它们的父元素中答案

【问题标题】：How come my float elements aren't within their parent为什么我的浮动元素不在它们的父元素中
【发布时间】：2011-06-05 14:47:42
【问题描述】：

所以基本上我有这个包装 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 的边框内，但仍然在其中对齐，这是为什么呢？

【问题讨论】：

Which method of 'clearfix' is best? 的可能重复项
太棒了，非常感谢。但最后的回应是一种更容易解释的方式。

标签： css xhtml html

【解决方案1】：

您需要“清除”容器 div。

在计算容器的尺寸时不考虑浮动元素，但是有几种解决方法可以得到你想要的。

最简单的

只需添加一个像这样的 div 作为容器 div 中的最后一个子项：

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

作为@Pekka cmets，还有许多其他方法可以实现此 SO 问题中列出的效果（无需额外标记）：

What methods of ‘clearfix’ can I use?

【讨论】：

由于那个div可能有高度，而且由于它需要在文档中添加一个额外的元素，所以这种方法一般不是首选。
@David True，我更喜欢使用 clearfix 类，但这显然需要一些设置。
也许不是首选，但它完美地解决了问题。那么简单来说，另一种首选方法是什么？
@dave 一个应用到容器的类，它使用 CSS 在容器之后插入一些内容，这将把它的高度拉到浮动的孩子之上。这是首选，因为它可以使您的标记源代码在语义上保持愉快（即不存在不代表任何内容的 div）。
@dave overflow: hidden 正如我在回答中所说的

【解决方案2】：

因为point of float是为了让你做类似的事情

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

【讨论】：

补充：浮动元素不会向其父元素添加高度/宽度。所以如果浮动的div是父div中唯一的东西，父div将是0x0像素。