clear

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die clear CSS-Eigenschaft legt fest, ob ein Element unterhalb (gelöscht) von schwebenden Elementen verschoben werden muss, die ihm vorausgehen. Die clear-Eigenschaft gilt sowohl für schwebende als auch für 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: rgba(81, 81, 81, 0.6);
  padding: 1em;
  float: left;
}

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

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

Vertikale Ränder zwischen zwei schwebenden Elementen hingegen kollabieren nicht. Wenn sie auf schwebende Elemente angewendet wird, wird die Randkante des unteren Elements unter die Randkante aller relevanten Schwebeteile verschoben. Dies beeinflusst die Position späterer Schwebeteile, da spätere Schwebeteile nicht höher als frühere positioniert werden können.

Die Schwebeteile, die zu klären sind, sind die früheren Schwebeteile innerhalb desselben Block-Formatierungs-Kontextes.

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, seine Größe zu ändern, sodass es schwebende Elemente darin enthält, setzen Sie den Wert der display-Eigenschaft des Elements auf flow-root.

css
#container {
  display: flow-root;
}

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

Ist ein Schlüsselwort, das angibt, dass das Element nicht nach unten verschoben wird, um an schwebenden Elementen vorbeizukommen.

left

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an linken Schwebeteilen vorbeizukommen.

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an rechten Schwebeteilen vorbeizukommen.

both

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um an beiden linken und rechten Schwebeteilen vorbeizukommen.

inline-start

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Schwebeteile auf der Anfangsseite seines enthaltenen Blocks zu klären, also die linken Schwebeteile bei ltr-Skripten und die rechten Schwebeteile bei rtl-Skripten.

inline-end

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Schwebeteile auf der Endseite seines enthaltenen Blocks zu klären, also die rechten Schwebeteile bei ltr-Skripten und die linken Schwebeteile bei rtl-Skripten.

Formale Definition

Anfangswertnone
Anwendbar aufBlocklevel Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

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: #fff;
  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: #fff;
  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: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}

Spezifikationen

Specification
Cascading Style Sheets Level 2
# propdef-clear
CSS Logical Properties and Values Level 1
# float-clear

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch