clear

Die clear CSS Eigenschaft legt fest, ob ein Element unter (geklärt) den floatenden Elementen platziert werden muss, die ihm vorausgehen. Die clear Eigenschaft gilt sowohl für floatende als auch für nicht-floatende Elemente.

Probieren Sie es aus

Wenn sie auf nicht-floatende Blöcke angewendet wird, verschiebt sie die Border-Kante des Elements nach unten, bis es unter der Margin-Kante aller relevanten Floats liegt. Der obere Rand des nicht-gefloateten Blocks kollabiert dabei.

Vertikale Margen zwischen zwei gefloateten Elementen werden hingegen nicht kollabieren. Wird sie auf floatende Elemente angewandt, wird die Margin-Kante des unteren Elements unter die Margin-Kante aller relevanten Floats verschoben. Dies beeinflusst die Position späterer Floats, da spätere Floats nicht höher als frühere positioniert werden können.

Die Floats, die es zu klären gilt, sind die früheren Floats innerhalb des gleichen Block-Formatierungskontextes.

Hinweis: Wenn ein Element nur gefloatete Elemente enthält, kollabiert seine Höhe auf Null. Wenn Sie möchten, dass es immer in der Lage ist, sich so zu vergrößern, dass es Float-Elemente innerhalb 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 über floatende Elemente hinauszugehen.

left

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um über linke Floats hinauszugehen.

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um über rechte Floats hinauszugehen.

both

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um über sowohl linke als auch rechte Floats hinauszugehen.

inline-start

Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Floats auf der Anfangsseite des umgebenden Blocks zu klären, also 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 des umgebenden Blocks zu klären, also die rechten Floats bei ltr-Skripten und die linken Floats bei rtl-Skripten.

Formale Definition

Initialer Wertnone
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 Revision 2 (CSS 2.2) Specification
# propdef-clear
CSS Logical Properties and Values Level 1
# float-clear

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch