Übung 7: Ein Bild vom Text umfließen lassen – und die nächste Überschrift darunter beginnen

Hinweise

Lösung

.bild { float: left; }
h2 { clear: left; }

Was float mit den Zeilen macht – und was nicht

Ein umflossenes Element wird aus dem normalen Fluss genommen und an den Rand seines enthaltenden Blocks geschoben. Der Text daneben weicht ihm aus, aber nicht so, wie es zunächst aussieht: Nicht die Blockbox des Absatzes wird schmaler, sondern nur die Zeilenboxen darin. Der Absatz selbst liegt weiterhin über die volle Breite und beginnt an derselben Stelle wie ohne das Bild.

Sichtbar wird der Unterschied, sobald der Absatz einen Hintergrund oder einen Rahmen bekommt: Beide laufen unter dem Bild hindurch, während der Text daneben steht. Das ist kein Fehler, sondern die Definition – und es erklärt zugleich, warum ein Container, der nur umflossene Kinder enthält, in sich zusammenfällt.

Wer den Hintergrund am Bild vorbeiführen will, macht den Absatz zu einem eigenen Block-Formatierungskontext – in CSS 2.1 über einen anderen Überlaufwert, heute über den ausdrücklichen Wert dafür. Dann verkürzt sich die ganze Box, und Rahmen und Hintergrund folgen.

Was clear tut

clear wirkt nicht auf das umflossene Element, sondern auf ein späteres: Es verlangt, dass die Oberkante dieses Elements unterhalb der Unterkante aller vorangehenden Floats der genannten Seite liegt. Der Browser erreicht das nicht durch einen Außenabstand, sondern durch einen eigenen Betrag, der Clearance heißt und zwischen die beiden Kanten eingezogen wird.

Der Unterschied ist mehr als terminologisch. Clearance ist kein Abstand und fällt deshalb mit keinem zusammen; ein zusätzlich gesetzter oberer Außenabstand wird schlicht ignoriert, wenn die Clearance ohnehin größer ist. Wer nach einem geräumten Element noch Luft haben will, setzt sie am Element davor oder an einem Zwischenelement.

Die drei Werte sind links, rechts und beide. In dieser Aufgabe genügt der linke, weil nur links etwas steht; in echten Layouts ist der Wert für beide Seiten die sicherere Wahl, weil er auch dann greift, wenn später ein rechter Float dazukommt.

Der Container, der zu kurz bleibt

Die dritte Folge derselben Regel ist die bekannteste: Ein Container, dessen Kinder alle umflossen sind, hat die Höhe null, weil er nur misst, was im Fluss geblieben ist. Über Jahre gab es dafür einen festen Kunstgriff – ein Pseudoelement am Ende des Containers, das nichts anzeigt und beide Seiten räumt.

Der kürzere Weg ist, den Container selbst zu einem eigenen Formatierungskontext zu machen; dann umschließt er seine Floats. In altem Code findet sich dafür ein abgeschnittener Überlauf, dessen eigentlicher Zweck genau das war und nicht das Abschneiden.

Für Anordnungen nebeneinander braucht es Floats heute gar nicht mehr – Flexbox und Grid kennen weder zusammenfallende Container noch Räumung am Reihenende. Geblieben ist die ursprüngliche Aufgabe: ein Bild, um das der Text herumläuft. Genau dafür ist die Eigenschaft gedacht, und dafür gibt es bis heute keinen Ersatz.

Bilder im Fließtext auf schmalen Bildschirmen

Ein umflossenes Bild neben Text setzt voraus, dass für beides Platz ist. Unterhalb einer gewissen Spaltenbreite bleiben neben dem Bild nur noch zwei, drei Wörter je Zeile stehen, und der Text wird unlesbar. Die übliche Antwort ist eine Bedingung, die den Float unterhalb einer Breite aufhebt und das Bild über die volle Spalte stellt.

Dazu gehört, dass das Bild selbst mitskaliert. Eine Höchstbreite von hundert Prozent und eine automatische Höhe genügen dafür; ohne sie ragt ein großes Bild aus der Spalte heraus und erzeugt einen waagerechten Rollbalken. Angegebene Breiten- und Höhenattribute im Dokument sollten trotzdem stehenbleiben – aus ihnen berechnet der Browser das Seitenverhältnis und reserviert den Platz, bevor das Bild geladen ist. Das verhindert das Springen des Layouts während des Ladens.

Für den Text um das Bild herum lohnt außerdem ein Blick auf den Abstand: Ein umflossenes Element ohne Außenabstand klebt am Text. Und wer den Text nicht dem Kasten, sondern der Silhouette einer freigestellten Grafik folgen lassen will, findet dafür eine eigene Eigenschaft, die nach CSS 2.1 hinzugekommen ist – der Float bleibt dabei die Voraussetzung, denn sie wirkt nur auf umflossene Elemente.

Der Prüfer stellt zwei Fragen: ob der Absatz neben dem Bild steht und ob die Überschrift unterhalb seiner Unterkante beginnt. Beides zusammen ist der Kern des Umfließens – das eine zeigt, dass das Bild aus dem Fluss genommen wurde, das andere, dass ein späteres Element es wieder einholen kann. Der Fluss-Visualizer lässt sich für beide Fragen frei durchspielen.

Fragen zur Übung