CSS clear-Eigenschaft
Die clear-Eigenschaft steht in direktem Zusammenhang mit Floats. Die clear-Eigenschaft wird verwendet, um anzugeben, ob ein Element neben schwebenden Elementen platziert werden soll oder darunter (clear).
Die clear-Eigenschaft kann sowohl auf schwebende als auch auf nicht-schwebende Elemente angewendet werden. Diese Eigenschaft akzeptiert Werte wie none, left, right, both, initial und inherit. none ist der Standardwert. Er erlaubt schwebende Elemente auf beiden Seiten. Der Wert left erlaubt keine schwebenden Elemente auf der linken Seite. Der Wert right erlaubt keine schwebenden Elemente auf der rechten Seite. Der Wert both erlaubt keine schwebenden Elemente auf der linken oder rechten Seite.
Hinweis: Die clear-Eigenschaft wirkt sich nur auf Elemente im normalen Blockfluss aus und funktioniert nicht mit Flexbox- oder Grid-Layouts.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Block-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | element.style.clear = "both"; |
Syntax
Syntax der CSS clear-Eigenschaft
clear: none | left | right | both | initial | inherit;Beispiel für die clear-Eigenschaft:
Beispiel der CSS clear-Eigenschaft mit dem Wert left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Ergebnis
Beispiel für die clear-Eigenschaft mit dem Wert „right“:
Beispiel der CSS clear-Eigenschaft mit dem Wert right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Beispiel für die clear-Eigenschaft mit dem Wert „both“:
Beispiel der CSS clear-Eigenschaft mit dem Wert both
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Erlaubt schwebende Elemente auf beiden Seiten. Dies ist der Standardwert dieser Eigenschaft. |
| left | Bedeutet, dass schwebende Elemente auf der linken Seite nicht erlaubt sind. |
| right | Bedeutet, dass schwebende Elemente auf der rechten Seite nicht erlaubt sind. |
| both | Bedeutet, dass schwebende Elemente auf keiner der beiden Seiten erlaubt sind. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche Funktion hat die 'clear'-Eigenschaft in CSS?