Umflossene Elemente und ihr Verhalten

Ausgangssituation

Der grau hinterlegte DIV-Container enthält zwei Absätze. Der erste Absatz (könnte auch ein Bild sein) wird vom Text umflossen, der zweite Absatz umfließt den Text.

Verhalten im Firefox, Mozilla, Konqueror, Opera und Safari: Das umflossene Element ragt über den DIV-Container hinaus. Nachfolgende Elemente werden ebenfalls umflossen.
Verhalten im Internet Explorer 5 bis 7 (RC 1): Der IE verhält sich wie Firefox & Co., solange für den DIV-Container keine Breite angegeben ist.

Quelltext

<div style="background: #eee">
<div style="width: 200px; height: 150px; float: left; background: #cff">
Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein
als der umfließende Text.</div>
<div>Dieser Text umfließt die Box bzw. ein Bild.</div>
</div>

<p>Nachfolgende Elemente werden ebenfalls umflossen.</p>

Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein als der umfließende Text.

Dieser Text umfließt die Box bzw. ein Bild.

Nachfolgende Elemente werden ebenfalls umflossen.

Methode 1: ein Element im DIV-Container

Meistens wird ein Element am Ende des DIV-Containers eingefügt, mit dem alle Einstellungen für das Umfließen aufgehoben werden. Dafür wird die CSS-Eigenschaft clear verwendet. Das Element darf nicht leer sein, da sonst im Internet Explorer 5 und 5.5 ein Darstellungsfehler auftritt. Es kann   in DIV oder eine HR-Linie verwendet werden. Ist bereits eine abschließende Zeile (siehe Fußnote) im DIV-Container vorhanden, kann sie ebenfalls verwendet werden. Ist das nicht der Fall, muss die abschließende Zeile so ausgeblendet werden, dass sie keinen sichbaren Absatz erzeugt.

Beispiel mit abschließender Fußnote

Quelltext

<div style="background: #eee">
<div style="width: 200px; height: 150px; float: left; background: #cff">
Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein
als der umfließende Text.</div>
<div>Dieser Text umfließt die Box bzw. ein Bild.</div>
<div style="clear:both">Fußnote</div>
</div>

<div>Nachfolgende Elemente werden nicht umflossen.</div>

Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein als der umfließende Text.

Dieser Text umfließt die Box bzw. ein Bild.

Fußnote

Nachfolgende Elemente werden nicht umflossen.

Beispiel mit leerer Fußnote

Quelltext

<div style="background: #eee">
<div style="width: 200px; height: 150px; float: left; background: #cff">
Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein
als der umfließende Text.</div>
<div>
Dieser Text umfließt die Box bzw. ein Bild.</div>
<div style="clear:both; overflow:hidden; height: 0.1px; font-size: 0.1px; line-height: 0.1px;">&nbsp;</div>
</div>

<div>Nachfolgende Elemente werden nicht umflossen.</div>

Als CSS-Klasse

.clear {
clear:both;
overflow:hidden;
height: 0.1px;
font-size: 0.1px;
line-height: 0.1px;
}

Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein als der umfließende Text.

Dieser Text umfließt die Box bzw. ein Bild.

Nachfolgende Elemente werden nicht umflossen.

Methode 2: mit CSS 2 und Breitenangabe

Diese Methode verwendet die CSS-Eigenschaft display:table und nutzt das Verhalten des Internet Explorer, bei einer Breitenangabe den DIV-Container zu schließen.

<div style="background: #eee; display: table; width: 100%">
<div style="width: 200px; height: 150px; float: left; background: #cff">
Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein
als der umfließende Text.</div>
<div>Dieser Text umfließt die Box bzw. ein Bild.</div>
</div>

<div>Nachfolgende Elemente werden nicht umflossen.</div>

Dieser Text wird umflossen. Damit das Verhalten deutlich wird, muss er höher sein als der umfließende Text.

Dieser Text umfließt die Box bzw. ein Bild.

Nachfolgende Elemente werden nicht umflossen.