senäh

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.

.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:

.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