Parent div ingnores height of child because of its float - html

Question

The parent height is set to auto but does not grow, because the child div has a float to the left. What is happening here, how can I fix it?
js fiddle
HTML
<div class="wrap">
<div class="content">....</div>
</div>
CSS
.wrap{
background: blue;
width:600px;
height: auto;
border: solid 3px;
}
.content{
background: red;
width:200px;
padding: 10px;
height: auto;
float: left;
}

Answer 1

You can either add overflow:auto to your wrap div
or clear the floats.
Solution 1:
HTML:
<div class="wrap">
<div class="content">....</div>
</div>
CSS:
.wrap{
background: blue;
width:600px;
height: auto;
border: solid 3px;
overflow:auto;
}
SOLUTION 2:
<div class="wrap">
<div class="content">....</div>
<div class="clr"></div>
</div>
CSS:
.clr
{
clear:both;
}
Please refer the below link for better understanding:
Clearing floats

Answer 2

You could change the overflow parameter but this impacts the overflow behaviour. Using floats goes together with a clear:all div, it's like tracing a imaginative line under your flatings to start over on a new line.. some kind of line break but for the floats...
Add a last sibling div with style clear:both
<div class="wrap">
<div class="content">....</div>
<div style="clear:both"></div>
</div>
http://jsfiddle.net/Xksbs/6/

Answer 3

Add overflow:auto; to the parent <div>: JSFiddle
Code:
.wrap{
background: blue;
width:600px;
height: auto;
border: solid 3px;
overflow:auto;
}

Answer 4

There's nothing wrong in setting float left to the child, You have to just add overflow:hidden to the parent div to achieve your need
http://jsfiddle.net/Xksbs/4/

Answer 5

Just like Vincent Durpez said, and here you can see the
js fiddle [http://jsfiddle.net/Xksbs/5/]