How come my float elements aren't within their parent - css

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
If you want to arrange elements in a row (with optional wrapping), then look to use Flexbox instead. It is a layout tool designed for that.
div {
display: flexbox;
border: 2px solid blue;
}
img {
margin: 3px;
}
<div>
<img src="https://placekitten.com/100/100" alt="">
<img src="https://placekitten.com/100/200" alt="">
<img src="https://placekitten.com/200/100" alt="">
<img src="https://placekitten.com/150/150" alt="">
<img src="https://placekitten.com/75/100" alt="">
<img src="https://placekitten.com/100/75" alt="">
<img src="https://placekitten.com/75/75" alt="">
<img src="https://placekitten.com/105/95" alt="">
</div>
If floats are the right tool for your use case, then 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).
div {
overflow: hidden;
border: 2px solid blue;
}
img {
float: left;
margin: 3px;
}
<div>
<img src="https://placekitten.com/100/100" alt="">
<img src="https://placekitten.com/100/200" alt="">
<img src="https://placekitten.com/200/100" alt="">
<img src="https://placekitten.com/150/150" alt="">
<img src="https://placekitten.com/75/100" alt="">
<img src="https://placekitten.com/100/75" alt="">
<img src="https://placekitten.com/75/75" alt="">
<img src="https://placekitten.com/105/95" alt="">
</div>