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