Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

14.5 Vier Methoden zum Einschließen von Floats

Ziel aller vier im Folgenden gezeigten Methoden ist, dass das umgebende div-Element die gefloatete Grafik einschließt. Im Englischen nennt man dies »containing floats«. Hier die vier Methoden im Überblick:

  1. Vor dem </div> wird ein zusätzliches HTML-Element eingefügt und im CSS gecleart.
  2. Das umgebende div-Element wird ebenfalls gefloatet.
  3. Das div bekommt die Eigenschaft overflow: hidden.
  4. Per CSS wird nach dem div ein Punkt erzeugt und gecleart.

Alle vier Lösungen haben verschiedene Vor- und Nachteile, erreichen aber dasselbe Ziel, nämlich dass die gefloateten Bilder vom umgebenden div eingeschlossen werden.

Die Grundlage für alle vier Methoden ist der Stand von Abbildung 14.3 (die unter diesem Absatz deshalb noch einmal erscheint): Die Grafiken sind gefloatet, aber alles ist durcheinander. 

Abbildung 14.3: Der erste Versuch – eine ziemlich windschiefe Galerie
Abbildung 14.3: Der erste Versuch – eine ziemlich windschiefe Galerie