Eigenschaft clear

Die Eigenschaft clear hebt das Umfließen eines Elements durch andere, das durch die Eigenschaft float festgelegt wurde, auf. Kann die folgenden Werte annehmen: none (hebt die eigene Wirkung auf), both (hebt float gleichzeitig rechts und links auf), left (hebt float links auf), right (hebt float rechts auf).

Syntax

Selektor {
	clear: none oder left oder right oder both
}

Beispiel

Lassen Sie uns das Umfließen des Bildes durch Text links aufheben:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

Beispiel

Lassen Sie uns nun das Umfließen des Bildes durch Text rechts aufheben:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

Beispiel

Lassen Sie uns die Wirkung der Eigenschaft clear selbst aufheben:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

Siehe auch

die Eigenschaft bottom,
die die Position des unteren Rands eines Elements festlegt
die Eigenschaft top,
die die Position des oberen Rands eines Elements festlegt
die Eigenschaft left,
die die Position des linken Rands eines Elements festlegt
die Eigenschaft right,
die die Position des rechten Rands eines Elements festlegt
das Pseudoelement ::backdrop,
das die Positionierung nach dem ersten Element festlegt
die Eigenschaft caption-side,
die die Position der Tabellenüberschrift festlegt