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 (geklärt) der zuvor stehenden floating Elemente verschoben werden muss. 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: 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;
}

Bei der Anwendung auf nicht schwebende Blöcke wird die border edge des Elements nach unten verschoben, bis sie unterhalb der margin edge aller relevanten Floats liegt. Der obere Rand des nicht schwebenden Blocks kollabiert.

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

Die relevanten Floats, die geklärt werden müssen, sind die früheren Floats innerhalb desselben block formatting context.

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, sich zu vergrößern, sodass es schwebende Elemente innerhalb enthalten kann, 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 vorbeizugehen.

left

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

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

both

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

inline-start

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Floats auf der Startseite seines umgebenden Blocks zu klären, das heißt die linken Floats bei ltr-Skripten und die rechten Floats bei rtl-Skripten.

inline-end

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Floats auf der Endseite seines umgebenden Blocks zu klären, das heißt die rechten Floats bei ltr-Skripten und die linken Floats 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

Siehe auch