Stil mit {stil}

Mar 2009

CSS clear • Umfließen von schwebenden Elementen beenden

Die CSS-Eigenschaft clear beendet das Umfließen von Elementen und zwingt ein Element wieder an den linken oder rechten Rand seiner Box und damit zugleich unter eine schwebende Box.

Wenn Bilder oder Layout-Elemente durch die Eigenschaft float umflossen werden, kann es zu einem »Treppeneffekt« kommen, wenn der Textabsatz nicht so hoch ist wie das Bild. Dann beginnt der nächste Absatz nicht unter, sondern neben dem Bild.

Die CSS-Regel clear: left oder clear: both wird nicht auf das schwebende Element angewendet, sondern auf einen Block (z.B. einen Textabsatz oder eine Überschrift) nach dem schwebenden Element. clear versetzt die auf das schwebende Element folgenden Inhalte zwangsweise an den linken bzw. rechten Rand.

h2 { clear: both; }

<h2>Lorem ipsum … </h2>
<p><img style="float: right;" … /> …  dolor sit amet, …</p>
<h2>Vivamus dui</h2>
<p><img style="float: right;" … />Donec faucibus … </p>

clear

IE 4+ M1 N6+ O5+ CSS1 Erblich: Nein

clear

beendet das Umfließen eines schwebenden Bildes. Es wird nur auf Blockelemente angewendet.

Werte

none | left | right | both | inherit

none

ist die Voreinstellung und hebt alle Beschränkungen auf, wo das Element im Text erscheinen darf.

left

setzt ein schwebendes Element auf die linke Seite des umfassenden Blocks.

right

setzt ein schwebendes Element auf die rechte Seite des umfassenden Blocks.

both

steuert, dass ein schwebendes Element unter allen vorhergehenden Elementen erscheint.

zurück zum Seitenanfang