Im voherigen Kapitel "CSS: Der Flow und die Positionierung" haben Sie den normalen Fluss und die Eigenschaft position mit den Werten relative, absolute und fixed kennen gelernt. Eine weitere Möglichkeit der Positionierung von Elementen ist die Eigenschaft float, um die es hier gehen soll. Dieser Kursabschnitt zeigt Ihnen, wie Grafiken mit float und clear einfacher und effektiver positioniert werden können.

Den Anfang macht eine Situation, die beim Erstellen von Webseiten regelmäßig auftaucht und von ungeübten CSS-Autoren aus Gewohnheit immer noch oft durch eine einfache Layout-Tabelle gelöst wird: die Positionierung von Grafiken im Fließtext einer Webseite.

Float: Schwebende Boxen

Float ist eine CSS-Eigenschaft, die die Werte left oder right annehmen kann. To float heißt schweben und eine schwebende Box macht der Reihe nach drei Bewegungen:

1. Sie erhebt sich aus dem normalen Fluss ("Flow") der Elemente.

2. Sie schwebt wie ein losgelassener Heißluftballon innerhalb der umgebenden Box so weit wie möglich nach oben.

3. Oben angekommen driftet sie je nach Windrichtung soweit es geht nach links oder rechts.

In diesem Artikel lernen Sie das ursprüngliche Einsatzgebiet für float kennen, Grafiken in einem Fließtext von dem Text umfließen zu lassen. float hat sich aber auch als Methode zur Umsetzung von mehrspaltigen CSS-Layouts etabliert, was in einem eigenen Artikel beschrieben wird.

Schritt 1: Grafik einfügen

Um zu zeigen wie float funktioniert, fügen Sie zunächst auf der Beispielseite eine Grafik ein. Um die Grafik einzufügen, öffnen Sie die Seite in einem Editor und ändern den Quelltext wie folgt: