Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

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