Umfließen von Elementen mit clear beenden

Jedes Block-Element beginnt normalerweise mit einer neuen Zeile, sodass sie nicht nebeneinander angeordnet werden. Mit der Eigenschaft float kann man sie jedoch umfließen lassen und sie dadurch nebeneinander anordnen. In manchen Fällen kann es notwendig sein, das Umfließen zu beenden. Hierfür verwendet man die Eigenschaft clear.

Die Eigenschaft clear wird dem Element zugewiesen, das das Umfließen beenden und die Position in einer neuen Zeile an dem Rand einnehmen soll. Die Syntax ist auf der folgenden Abbildung mit einem Beispiel ersichtlich.

Werte für die Eigenschaft clear

Für die Eigenschaft clear können die folgenden Werte verwendet werden.

none (Standardwert, beendet float nciht)
left (Beendet float: left;)
right (Beendet float: right;)
both (Beendet float: left; und float: right;)
initial (Setzt auf den Standardwert)
inherit (Geerbt vom Elternelement)

Beispiel für clear: left;

Mit den folgenden CSS- und HTML-Codes werden zwei DIV-Container linksseitig nebeneinander angeordnet. Der dritte Container beendet das Umfließen und wird unterhalb von den beiden Containern begonnen.

.selektor1 {
width: 300px;
float: left;
border: 1px solid #000000;
}

.selektor2 {
width: 300px;
float: left;
border: 1px solid #000000;
}

.selektor3 {
width: 300px;
clear: both;
border: 1px solid #000000;
}

<div class="selektor1">Inhalt1</div>
<div class="selektor2">Inhalt2</div>
<div class="selektor3">Inhalt3</div>

Die Elemente würden bei diesen Codes wie folgt angeordnet werden.

Dem beendenden Element float zuweisen

Dem beendenden Element selbst kann man wiederum mit float umfließen lassen. Mit den folgenden CSS- und HTML-Codes würden in zwei Zeilen jeweils zwei Elemente nebeneinander angeordnet werden.

.selektor1 {
width: 300px;
float: left;
border: 1px solid #000000;
}

.selektor2 {
width: 300px;
float: left;
border: 1px solid #000000;
}

.selektor3 {
width: 300px;
clear: both;
float: left;
border: 1px solid #000000;
}

.selektor4 {
width: 300px;
float: left;
border: 1px solid #000000;
}

<div class="selektor1">Inhalt1</div>
<div class="selektor2">Inhalt2</div>
<div class="selektor3">Inhalt3</div>
<div class="selektor4">Inhalt4</div>

Bei diesen Codes würden die Elemente wie folgt angeordnet werden.

Nach dem selben Schema kann man auch clear: right; oder clear: both; anwenden. Beim Wert both wird das Umfließen von right und left beendet, wenn z.B. mehreren Elementen beim float unterschiedliche Werte zugewiesen wurden.