我的浮动元素如何不在他们的父级 [英] How come my float elements aren't within their parent

问题描述

所以基本上我有这个包装的div，它里面的所有元素是浮动的元素。只有东西是封装的div的边框不包括浮动的元素。范例：

So basically i have this wrapper div, and all the elements inside it are floated elements. Only thing is the border of the wrapper div does not include the floated elements in it. Example:

<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;
}

$ b b

基本上#content没有包含在＃wrapper的边框内，但是仍然对齐，为什么？

Basically #content is not enclosed within #wrapper's border, but still aligns within it, why is this?

推荐答案

您需要clearfix容器div。

You need to "clearfix" the container div.

计算容器的维度时不考虑浮动元素，但有几种解决方法

Floated elements are not considered when calculating the dimensions of a container, however there are several workarounds to get what you want.

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

Just add a div like this one as the last child in your container div:

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

作为@Pekka评论，有很多其他方法来实现效果（没有额外的标记） SO问题：

As @Pekka comments there are many other ways to achieve the effect (without extra markup) listed in this SO question:

哪种方法的clearfix是最好的吗？

这篇关于我的浮动元素如何不在他们的父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！