`clear` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die clear-Eigenschaft CSS legt fest, ob ein Element unterhalb (vorherige) schwebende Elemente verschoben werden muss. Die clear-Eigenschaft gilt für schwebende und nicht schwebende Elemente.

Probieren Sie es aus

clear: none;

clear: left;

clear: right;

clear: both;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="floated-left">Left</div>
    <div class="floated-right">Right</div>
    <div class="transition-all" id="example-element">
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  line-height: normal;
}

.floated-left {
  border: solid 10px #ffc129;
  background-color: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: left;
}

.floated-right {
  border: solid 10px #ffc129;
  background-color: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: right;
  height: 150px;
}

Syntax

css

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;

Werte

none: Ein Schlüsselwort, das angibt, dass das Element nicht nach unten verschoben wird, um an schwebenden Elementen vorbeizugehen.
left: Ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an linken schwebenden Elementen vorbeizugehen.
right: Ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an rechten schwebenden Elementen vorbeizugehen.
both: Ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an beiden schwebenden Elementen vorbeizugehen.
inline-start: Ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an schwebenden Elementen auf der Startseite seines umgebenden Blocks vorbeizugehen, das heißt, den linken schwebenden Elementen bei ltr-Skripten und den rechten bei rtl-Skripten.
inline-end: Ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an schwebenden Elementen auf der Endseite seines umgebenden Blocks vorbeizugehen, das heißt, den rechten schwebenden Elementen bei ltr-Skripten und den linken bei rtl-Skripten.

Wenn es auf nicht schwebende Blöcke angewendet wird, bewegt es die Rahmenkante des Elements nach unten, bis es unterhalb der Randkante aller relevanten schwebenden Elemente liegt. Der obere Rand des nicht schwebenden Blocks kollabiert.

Vertikale Ränder zwischen zwei schwebenden Elementen hingegen kollabieren nicht. Wenn es auf schwebende Elemente angewendet wird, wird die Randkante des unteren Elements unter die Randkante aller relevanten schwebenden Elemente bewegt. Dies beeinflusst die Position nachfolgender schwebender Elemente, da nachfolgende schwebende Elemente nicht höher positioniert werden können als frühere.

Die schwebenden Elemente, die relevant sind, um freigeschaltet zu werden, sind die früheren schwebenden Elemente innerhalb desselben Blockformatierungskontexts.

Hinweis: Wenn ein Element nur schwebende Elemente enthält, kollabiert seine Höhe zu nichts. Wenn Sie möchten, dass es immer in der Lage ist, in der Größe zu ändern, so dass es schwebende Elemente in sich enthält, setzen Sie den Wert der display-Eigenschaft des Elements auf flow-root.

css

#container {
  display: flow-root;
}

Formale Definition

Anfangswert	`none`
Anwendbar auf	Blocklevel Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

clear = 
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  none

Beispiele

clear: left

HTML

html

<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>

CSS

css

.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

clear: right

HTML

html

<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>

CSS

css

.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

clear: both

HTML

html

<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>

CSS

css

.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}