CSS clear-Eigenschaft

Die Eigenschaft clear steht in direktem Zusammenhang mit Floats. Sie steuert, ob ein Element neben einem vorausgehenden gefloateten Element stehen darf oder ob es darunter verschoben (geclearet) werden muss.

Wenn ein Element gefloatet ist, umfließt der nachfolgende Inhalt den Float. Mit clear lässt sich dieses Umfließen unterbinden: Ein gecleartes Element rückt unter die untere Kante der Floats auf der angegebenen Seite, anstatt neben ihnen zu fließen.

Diese Seite erklärt, was jeder clear-Wert bewirkt, den häufigsten Anwendungsfall für clear (das „Clearfix"-Muster zur Einschließung von Floats) und worauf man achten sollte.

Wie clear funktioniert

clear akzeptiert die Werte none, left, right, both, initial und inherit:

none — der Standardwert. Das Element darf auf beiden Seiten neben Floats stehen.
left — das Element wird unter alle linken Floats verschoben, die vor ihm erscheinen.
right — das Element wird unter alle rechten Floats verschoben, die vor ihm erscheinen.
both — das Element wird unter alle Floats auf beiden Seiten verschoben. Dies ist in den meisten Fällen der gewünschte Wert.

Hinweis: clear reagiert nur auf Floats, die früher im Quellcode erscheinen, und wirkt nur auf Elemente im normalen Block-Fluss. Es hat keine Wirkung innerhalb von Flexbox- oder Grid-Layouts, wo float selbst ignoriert wird.

Wann verwendet man clear?

Der mit Abstand häufigste Einsatz von clear ist das Einschließen von Floats. Ein Elternelement, das ausschließlich gefloatete Kindelemente enthält, kollabiert auf null Höhe, da Floats aus dem normalen Fluss herausgenommen werden. Der klassische Fix – der „Clearfix" – fügt nach den Floats ein gecleartes Pseudo-Element ein, sodass das Elternelement sie umschließt:

/* Clearfix: makes a container wrap its floated children */
.container::after {
  content: "";
  display: block;
  clear: both;
}

Der andere häufige Anwendungsfall ist, dass ein Footer, eine Überschrift oder ein Abschnittsumbruch unterhalb eines gefloateten Bildes oder einer Seitenleiste beginnen soll, anstatt daneben zu fließen – genau das zeigen die folgenden Beispiele.

Anfangswert	none
Gilt für	Elemente auf Blockebene.
Vererbt	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 der 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="/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>

Probier es selbst »

Ergebnis

Beispiel der 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="/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>

Probier es selbst »

Beispiel der 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="/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>

Probier es selbst »

Beispiel des Clearfix-Musters

Hier zeigt clear seinen nützlichsten Einsatz: Ohne die clearfix-Regel würde das umrahmte Element auf null Höhe kollabieren, da sein einziges Kindelement gefloatet ist. Das ::after-Pseudo-Element mit clear: both zwingt das Element dazu, den Float zu umschließen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        border: 3px solid #1c87c9;
      }
      .box img {
        float: left;
        background: #ccc;
      }
      /* Remove this rule and the border collapses around nothing */
      .box::after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" alt="Floated image" />
    </div>
  </body>
</html>

Häufige Fehler

clear sieht nur frühere Floats. Es verschiebt ein Element unter Floats, die vor ihm im Quellcode erscheinen, nicht danach. Strukturieren Sie Ihr Markup entsprechend.
Das gefloatete Element selbst zu clearen hilft selten. Um Floats einzuschließen, sollte man ein Geschwisterelement nach ihnen clearen (das Clearfix ::after), nicht die Floats selbst.
Es hat keine Wirkung in Flexbox oder Grid. Innerhalb eines Flex- oder Grid-Containers wird float ignoriert, sodass clear nichts zu tun hat. Verwenden Sie für neuen Code Flexbox oder Grid statt Float-basierter Layouts.

Werte

Wert	Beschreibung
none	Erlaubt Float-Elemente auf beiden Seiten. Dies ist der Standardwert dieser Eigenschaft.
left	Bedeutet, dass Float-Elemente auf der linken Seite nicht erlaubt sind.
right	Bedeutet, dass Float-Elemente auf der rechten Seite nicht erlaubt sind.
both	Bedeutet, dass Float-Elemente auf keiner der beiden Seiten erlaubt sind.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom Elternelement.

Übung

Was bewirkt die Eigenschaft 'clear' in CSS?

Sie gibt an, welche Elemente neben dem gecleartem Element floaten dürfen und auf welcher SeiteSie legt die Ausrichtung eines Elements festSie steuert, wie die Box eines Elements angeordnet wirdSie verhindert, dass Float-Elemente auf der linken/rechten/beiden Seiten oder keiner Seite eines Elements erscheinenSie ermöglicht den Textumfluss um Bilder in einem Dokument