Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03224.jsonl.gz/1835

Bilder verhalten sich in HTML wie Zeichen: Sie sind Inline-Elemente, stehen somit auf einer Grundlinie der Schrift und reagieren auf Wortabstände und Zeilenabstände. Sind die Bilder zu gross, drücken sie den Zeilenabstand partiell auseinander.
561
Möchte man die Bilder mit umfliessen, brauchen sie nebst etwas Aussenabstand die Eigenschaft
float mit dem Wert
left oder
right. Das ist soweit ziemlich simpel. Etwas ungewöhnlich fürs Bauchgefühl: Es spielt hier keine Rolle, ob man ein Bild oder die Bilder am Schluss des Absatzes oder am Anfang platziert.
561
Wenn ein Text zu wenig lang ist, um ein Bild vollständig zu umfliessen, so wie im Absatz 3 des Musters oben, reagiert der nachfolgende Absatz ebenfalls auf dieses Floating, was zu ungewollten Ergebnissen führt. Spätestens dann empfiehlt es sich, den Absätzen selbst höflich mitzuteilen, das vorangehende Floating zu beenden. Probiert es aus und entfernt den Kommentar im CSS.
p { clear:both; }
Wie man
float verwendet, um mehrspaltige Layouts zu bauen, lest ihr im Beitrag Spaltenlayout mit Floating.