Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

14.10 Floats einschließen: die Übersicht

Welches ist nun die ideale Lösung? Keine. Ideal wäre eine Änderung der CSS-Spezifikation, und wahrscheinlich wird das Einschließen von Floats als Option in CSS 3 enthalten sein. Aber es kann locker noch ein paar Jährchen dauern, bis das im Alltag eines Webseitenbauers relevant wird.

Aber auch wenn keine der vier Methoden in allen Situationen die ideale Besetzung ist, hilft die folgende Übersicht vielleicht ein bisschen weiter:

Wenn es ein HTML-Element gibt, dass das Clearen übernehmen kann, sollten Sie es nutzen. Das kann z. B. eine Fußzeile oder wie im Beispiel ein einfaches hr sein. Falls sich kein HTML-Element anbietet und Sie auch kein zusätzliches einbauen können oder wollen, haben Sie die Qual der Wahl:

  • Je verschachtelter die Floats, desto unübersichtlicher und anfälliger für Browser-Bugs wird das Layout, besonders in älteren IEs.
  • overflow:hidden ist einfach, kommt ohne zusätzliches HTML und clear aus.
  • EasyClearing ist zwar schwierig zu verstehen, aber einfach einzusetzen und hat sich vielfach bewährt.

Hier noch eine kleine Übersicht über die vier Methoden:

Methode Mit clear Verschachtelte Floats
1. HTML-Element mit clear ja nein
2. Float to fix meist ja ja
3. overflow: hidden nein nein
4. Clearfix ja nein

Ich benutze für die Galerie im Folgenden übrigens overflow: hidden.