senäh

17senäh und so…

Clearfix-Hack Artikelbild

HTML/CSS/JS
29. Feb 2012
Kommentare: 12

Clearfix-Hack für das saubere clearen von float-Elementen

Kategorien: HTML/CSS/JS | 29. Feb 2012 | Kommentare: 12

Ihr kennt doch sicherlich das typische, oft zu beobachtende <div class="clearfix"></div>? Vielleicht habt ihr es sogar massiv selbst in Verwendung?

Wozu clear?

Falls nicht: das ganze ist notwendig, um Elemente mit der CSS-Eigenschaft float funktionsgemäß einzusetzen. Mithilfe von float lassen sich Elemente nebeneinander anordnen (sie “fließen”). Nach dem letzten so positionierten Element muss oft ein clear erfolgen, um das weitere Floaten – und somit ein zerhacktes Layout – zu verhindern.

Faustregel: unnötiges Markup vermeiden

Für viele, die sich an das tabellenlose Layout mithilfe von div-Containern gewöhnt haben, ist die Lösung schnell gefunden. Einfach ein neues div erstellen, die Klasse clearfix geben und per CSS das benötigte clear:both; zuweisen.

Das ist ok. Allerdings befinden wir uns dank HTML5 in einem Wandel. Semantik ist in. HTML-Markup soll eine Bedeutung haben, die anhand der Tags festgelegt wird. Infolge dessen werden viele klassische Strukturen durch eigene Tags abgelöst.

  • <div id="header"> digitiert zu <header>
  • <div id="footer"> digitiert zu <footer>
  • <div id="nav"> digitiert zu <nav>
  • <div id="section"> digitiert zu <section>
  • <div id="article"> digitiert zu <article>

Die Tendenz geht also hin zur Semantik. Jeden unnötigen div-Container oder span-Wrapper gilt es zu vermeiden. Und im Falle von clear gilt: there’s a hack for that!

Pseudo-Elemente to the rescue

Pseudo-Elemente sind ein lange unterschätztes Werkzeug. Erst durch einen Screencast von Chris Coyier bin ich auf die Fähigkeiten von Pseudo-Elementen aufmerksam geworden.

Mithilfe von :hover-ähnlichen Klassen wie :before und :after lässt sich unabhängig vom DOM-Tree zusätzlicher Content generieren. Die Möglichkeiten sind beschränkt, aber sie sind da.

Statt also einen zusätzlichen div-Container hinzuzufügen, kann man einfach hinter das letzte floatende Element einen zusätzlichen Block generieren, der die Eigenschaft clear:both; bekommt.

1
2
3
4
5
6
7
8
9
.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

“Ich hab den Kürzesten!”

Das ganze geht auch noch ein Stückchen kürzer. Wer Wert auf ein paar gesparte Bytes legt, dem sei diese Lösung wärmstens empfohlen:

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

Allerdings finde ich sie etwas – wait for it – unsemantisch. Schließlich wollte ich ursprünglich nach einem Element einen Block haben, der das Clearing übernimmt. Stattdessen wird bei der eben demonstrierten Lösung eine Tabelle generiert. Außerdem trifft man auf einmal auf :before und :after. Sieht für mich sehr dirty aus.

Das ist natürlich Geschmackssache und für welche Lösung man sich entscheidet, ist schlussendlich egal. Ich hoffe jedoch, dass ich klar machen konnte, dass ihr zum clearen von floatenden Elementen (Anglizismen FTW!) keinen extra div-Container verwenden müsst.

via CSS-Tricks

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)

Kommentare (12)

  1. Sehr coole Idee!
    ist das ‘content: “”;’ für die Browser-Kompatibilität notwendig? Sonst sehe ich da keinen Sinn, weil Pseudo-Elemente als solches doch erstmal leer sind.

    mfg :)

    • Ich glaube mich zu erinnern, dass sobald die Content-Eigenschaft fehlt, die ganze Clearfix-Geschichte nicht länger funktioniert. Wäre aber in der Tat mal interessant herauszufinden warum.

    • Vermutung nach kurzer Recherche: die Eigenschaft “content” ist Vorraussetzung dafür, dass das Pseudo-Element überhaupt gerendert wird. Die Pseudo-Elemente :before und :after sind ja auch dazu gedacht, zusätzlichen Inhalt einzufügen. Deswegen vermutlich die “content”-Pflicht.

  2. Jap, hier der beweis: http://dabblet.com/gist/1945199

    Ich war mir ziemlich sicher, schon Pseudo-Elemente ohne Content erstellt zu haben, aber das hab ich wohl geträumt ;) 

  3. Bei mir funktioniert das ganze irgendwie nicht.
    Meine #content div umschließt ihre Elemente trotz des Hacks nicht.
    Reicht es diesen ausschließlich im CSS einzufügen oder muss ich via HTML mein zuletzt gefloatetes Element die Klasse .clearfix hinzufügen? Das wäre doch eig. wieder unnötiges Markup?
    LG :)

    • Hey Sarah,

      wenn du keine extra Klasse hinzufügen möchtest und den Hack nur an einer Stelle benötigst, kannst du im CSS-Schnipsel einfach ”.clearfix” durch “#content” ersetzen. Sollte dann alles ordnungsgemäß funktionieren.

      Viele Grüße,
      Enno 

  4. *meinem zuletzt gefloatetem..padon :D

  5. Okay anhand von Hannes Pseudo-Test, hat sich meine Frage wegen der Klasse im HTML Markup erledigt.
     

  6. AAAH! Super, danke Enno! :)

  7. Jetzt ist nur die Frage, wie gehen ältere Browser damit um, die nicht HTML5 kompatibel sind? Also bspw. IE7 und so weiter ;-)

Hinterlasse einen Kommentarsenäh

Pflichtfelder sind mit * markiert.