Das Problem mit “float-Elementen” innerhalb eines Container ist, dass diese manchmal “ausbrechen”. Der Grund dafür ist, dass der Float, den Fluss unterbricht und somit das überstehende Element nicht weis wie hoch es sein soll. Da man es eigentlich schlecht erklären kann – hier ein Beispiel was gemeint ist:

In diesem Beispiel sieht man ganz gut, dass die Box 2 aus der Box 1 ausbricht, obwohl sich diese innerhalb befindet.
Um dieses zu unterbinden gibt es drei Möglichkeiten. Man kann z.b. ein “clear: both” hinter dem float-element hinzufügen. Eine andere Möglichkeit ist dem Element welcher ausbricht ein “overflow: auto” hinzuzufügen. Sollte man aus irgendwelchen Gründen auf ein Overflow nicht zugreifen können, so kann man auch den sogenannten “clearfix” benutzen. Das CSS dafür sieh so aus:

.clearfix:after {  /* für Firefox, IE8, Opera, Safari, etc. */
    content: ".";  
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
* + html .clearfix { /* für IE7 */
    display: inline-block;
}
 
* html .clearfix { /* für IE6 */
	height: 1%;
}

Und hier das HTML mit der “clearfix” Klasse:

<div class="test_clearfix_box clearfix">
    <p>Box 1</p>
    <div class="float_left_box">Box 2</div>
</div>

Und hier das Ergebniss wie es eignlich aussehen sollte: