Es gibt Situationen, in denen ein zusätzlicher div-Container mit einem “clear: both” einfach nicht mehr unterzubringen ist und zusätzlichen Code bedeuten würde. Es gibt aber die Möglichkeit einen Clear über eine Klasse anzubringen um sich diesen Code in der HTML-Datei zu ersparen…
Die sogenannte .clearfix-Klasse wird direkt auf die Container angewendet, die die gefloateten Container umfassen.
Das Pseudo-Element “:after” erzeugt einen Clear an deren Ende, der sich auf die innenliegenden Floats auswirkt. Die Höhe des Inhalts wird durch die verschiedenen Formatierungen (für z. B. den IE6) auf einen “kleinsten Wert” gesetzt.
Die Klasse wird folgendermaßen definiert:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Mehr Informationen zu der Funktionsweise gibt es z. B. unter www.positioniseverything.net.
