Der clearfix hack

Es gibt da dieses nervige Problem, das bei der Verwendung von floats auftreten kann:

img {
  float: right;
}

<div>

Ups … dieses Bild ist größer als das Element, das es umschließt, und es ist gefloated, deshalb wächst es über den Rand des div hinaus!

Buh. Das können wir geradebiegen, allerdings ist die Methode nicht besonders sauber. Sie nennt sich clearfix hack.

Versuchen wir mal, diese Zeilen hinzuzufügen:

.clearfix {
  overflow: auto;
}

Mal sehen, was passiert:

<div class="clearfix">

Schon viel besser!

Das funktioniert in modernen Browsern. Um auch IE6 zu unterstützen, musst Du noch diese Zeilen hinzufügen:

.clearfix {
  overflow: auto;
  zoom: 1;
}

Ein paar exotischere Browser brauchen noch mal ein bisschen extra Zuwendung. Die clearfix-Welt ist ziemlich ausufernd, aber diese einfache Lösung reicht für die allermeisten modernen Browser vollkommen aus.