Parent <div> not wrapping child element with float attribute

Please look at this example and explain to me why开发者_如何学运维 the green <div> does not wrap itself around the orange <div>.

<div id='green'>
  <div id="orange"></div>
</div>

#green{
    border: 20px solid #3D3;
}

#orange{
    width :100px;
    height: 100px;
    border: 10px solid orange;
    float: left;
}

Try adding float:left and display:block to the outer div

see updated example - http://jsfiddle.net/jordanlewis/gDtSZ/1/

Elements do not expand to contain floated children by default.

There are a number of workarounds, such as floating the parent, using a clearfix or adding overflow: hidden to the parent.

Personally, I try and use the latter.

Here is your jsFiddle working.

and if you don't want to float your outer div to left you can set it to

display:table

this will make the outer div wrap around the inner one.

<div id='green'>
  <div id="orange"></div>
  <div style="clear:both"></div>
</div>

The green box is not a floated element.

You need to either clear your float after the nested div or float both.

you could just add display:inline-block to the orange box.