Ein gutes Beispiel wäre folgendes: Man erstellt eine Seite wo der Inhalt zentriert sein soll. Das ganze passiert mittels "margin: 0 auto"; Ein Float kann man hier nicht hinzufügen da sonst der Container nicht mehr mittig ist. Problem ist jetzt aber wenn der Container zum Beispiel eine Hintergrundfarbe hätte und in dem Container jetzt ein weiterer wäre der "float:left" hätte und der Inhalt diesen wäre höher als der Container in dem ersteckt würde er nicht mehr eingeschlossen sein. Das führt dazu das der gefloatete Container über den anderen drüber geht und das nicht wirklich gut ist :) Hier kommt "clearfix" zum Einsatz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* Clearfix */ .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* Clearfix Patches für den IE */ .clearfix { display: inline-block; } /* Vor IE5/Mac verstecken mit dem Commented Backslash Hack \*/ * html .clearfix { height: 1px; } .clearfix { display: block; } /* Ende des Versteckspiels für den IE5/Mac */ |
Das einfach in die CSS File und dem Container der die Seite zentriert ein "class="clearfix"" mitgeben und schon umschließt der Container den gefloateten wieder vollkommen. Die class kann man dann natürlich auf viele Sachen anwenden innerhalb der Seite und ist deswegen eine ganz gute Möglichkeit. Wenn ich ehrlich bin hab ich diese Methode bisher aber fast noch nicht genutzt da ich eh immer fast alles floate. Sollte ich aber vielleicht öfters mal tun. Ist einfach und effektiv.
Statistik: read: 2394 / today: 2 / last: 17.05.2012
‹ Backend-Spalten umbenennen //
IE-Bug: “Vorgang abgebrochen” bei Verwendung von Mootools-Lightbox & swfObject ›
0 Kommentare