Floatbreaker

Noch gestern haben Fabian und ich uns über meine mannigfaltigen Benamsungen für CSS-Klassen amüsiert und zwar für solche Konstruktionen:

<div class="floatbreaker">&nbsp;</div>

Ganz klar, hier wird folgender Effekt erzielt: Der Container um zwei Elemente, von denen eines gefloatet ist, wird soweit heruntergezogen, dass er beide Elemente umschliesst. Wichtigste Eigenschaft der Klasse .floatbreaker ist clear: both; im CSS. Das ist nötig, weil das gefloatete Element aus der Blockkonstruktion herausfällt und über den Rand des umschließenden Elementes herausgeht, wenn es länger ist, als der Content des Containers.

Aber schön ist das nicht. Zum einen muss man .floatbreaker seltsame Einstellungen geben, damit es allerhöchstens 1px hoch ist. Das kann man auch noch vermeiden, indem man die Konstruktion so einsetzt:

<div class="floatbreaker"><!-- --></div>

Zum anderen haben wir es hier mit semantisch unsinnigem Code zu tun, der keine inhaltliche Funktion hat —wie auch, ohne Inhalt— und im Grunde ein hässlicher Hilfsanker ist.

Gestern abend nun plötzlich finde ich folgende neue Techniken in der Diskussion, und ehrlich gesagt, die gefallen mir viel besser:

• Alex Walker: Simple Clearing of Floats
• 456BereaStreet mit Testcase
• und weitergedacht: Anne van Kesteren: Super Simple Clearing of Floats (super!).

Im Kern haben diese neuen Techniken eine Idee: dem Container-Element wird eine overflow-Eigenschaft zugeordnet. Wer allerdings jetzt dachte, das funktioniert ohne Hacking in allen Browsern… natürlich nicht.

I’m the floatbreaker the real undertaker

(Traditional)