CSS-Eigenschaft clear

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'clear'?
Finden Sie das nützlich?