CSS clearfix
Juni 22, 2010 | Kommentieren
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:
Box 1
Box 2
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 kann man entweder ein “clear: both” hinter dem float-element hinzufügen, oder 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:
Box 1
Box 2
