CSS Float does not stretch Div Height

Question

I have had this problem for a long time when working with HTML/CSS and Floats.

In the image you can see I have a Box Div that is Floated left as there is many of these B

Answer 1

You need to clear your floats using a clearfix or clearing element.

Method #1 clearfix

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Then you add the class on the containing element

http://jsfiddle.net/u5HXu/8/

Method #2 Clearing Element

.clear {
    clear: both;
}

Then you add the following HTML after your floated elements.

http://jsfiddle.net/u5HXu/9/