Bilder floaten
Das klassische Einsatzgebiet für FLOAT ist die Positionierung von Grafiken in einem Fließtext. Im Quelltext steht das Bild vor dem Absatz und stünde eigentlich in einer Zeile für sich. Dadurch, dass wir das Bild links gefloatet haben, schwebt es nach links und der Text rutscht vertikal gesehen direkt unter das vorhergehende Element, als wäre das Bild gar nicht vorhanden. Dabei vergrößert sich der linke PADDING des Textes entsprechend. Unter dem Bild nimmt der Text wieder seine normale Breite ein. Ein MARGIN-RIGHT für den Abstand von Text und Bild, kombiniert mit PADDING und BORDER, verleiht dem Bild gleich einen Rahmen, und zwar ohne den Einsatz zusätzlicher Grafik.
Sollen Folgeabsätze wieder unter dem Bild beginnen...
... müssen sie gecleart werden. Dazu muss der durch FLOAT ausgelöste Schwebezustand für die folgenden Elemente mit der Eigenschaft CLEAR beendet werden.
Je nachdem, welcher Float vorliegt, lautet die Anweisung CLEAR: LEFT oder RIGHT. Meist spricht nichts dagegen, gleich CLEAR: BOTH zu verwenden (siehe Quelltext).
Klassen zum Floaten und Clearen
Es macht Sinn, sich dazu Klassen zu definieren, auch im Sinne der Wiederverwendbarkeit:
.float_left {
float: left;
padding: 3px;
border: 2px solid gray;
margin-right: 15px;
}
.float_right {
float: right;
padding: 3px;
border: 2px solid gray;
margin-left: 15px;
}
.clearing {
clear: both;
}
Alternativ kann der Einfachheit halber zumindest das Clearen auch direkt als Inline-Style im HTML-Quelltext erfolgen:
<p style="clear:both;"> ... </p>
