Die Eigenschaft clear steht in direktem Zusammenhang mit floats. Die Eigenschaft clear definiert, dass ein Element neben schwebenden Elementen stehen soll oder unter ihnen liegen soll (clear).
Wir können die Eigenschaft clear sowohl auf floating als auch auf non-floating Elemente anwenden. Diese Eigenschaft hat vier Werte: none, left right und both. "None" ist der Standardwert. Es ermöglicht schwimmende Elemente auf beiden Seiten. Der Wert "Left" value erlaubt kein schwebendes Element auf der linken Seite. Der Wert "Right" erlaubt kein schwebendes Element auf der rechten Seite. Der Wert "Both" rlaubt kein schwebendes Element auf der linken oder rechten Seite.
| Anfangswert | none |
| Gilt für | Block-Level-Elemente |
| Geerbt | Nein |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM Syntax | object.style.clear = "both"; |
Syntax
clear: none | left | right | both | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
<p class="clear">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
</body>
</html>Ein weiteres Beispiel mit dem Wert "left".
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
<p class="clear">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
</body>
</html>Ein Beispiel mit dem Wert "both".
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80">
<p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p class="clear">Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Der Wert ermöglicht schwimmende Elemente auf beiden Seiten. Es ist der Standardwert dieser Eigenschaft. |
| left | Es bedeutet, dass die schwebenden Elemente auf der linken Seite nicht erlaubt sind. |
| right | Es bedeutet, dass die schwebenden Elemente auf der rechten Seite nicht erlaubt sind. |
| both | Es bedeutet, dass die schwebenden Elemente sowohl auf der rechten als auch auf der linken Seite nicht erlaubt sind. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von seinem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
Was bewirkt die CSS-Eigenschaft 'clear'?
Richtig!
Falsch!