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

Question

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>

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

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

Answer 1

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.

The Simplest

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

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

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

What methods of 'clearfix' can I use?

Answer 2

Because the point of float is to allow you to do things like

Ed Eliot describes a large collection of different ways to make a container expand to contain it's floating children . I generally recommend setting overflow: hidden on it (to establish a new block formatting context).