clear
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die clear-Eigenschaft von CSS legt fest, ob ein Element unterhalb (freigestellt) von schwebenden Elementen, die ihm vorausgehen, verschoben werden muss. Die clear-Eigenschaft gilt sowohl für schwebende als auch 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
/* 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 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.
right-
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 Anfangsseite seines enthaltenden Blocks zu umgehen, d.h. die linken Floats in ltr-Skripten und die rechten Floats in rtl-Skripten.
inline-end-
Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Floats auf der Endseite seines enthaltenden Blocks zu umgehen, d.h. die rechten Floats in ltr-Skripten und die linken Floats in rtl-Skripten.
Beschreibung
Wenn es auf nicht schwebende Blöcke angewendet wird, verschiebt es die Randkante des Elements nach unten, bis sie unterhalb der Ränderkante aller relevanten Floats ist. Der obere Rand des nicht schwebenden Blocks kollabiert.
Vertikale Ränder zwischen zwei schwebenden Elementen hingegen kollabieren nicht. Wenn die Eigenschaft auf schwebende Elemente angewendet wird, wird die Ränderkante des unteren Elements unterhalb der Ränderkante aller relevanten Floats verschoben. Dies beeinflusst die Position späterer Floats, da diese nicht höher als frühere positioniert werden können.
Die relevanten Floats, die umgangen werden müssen, sind die früheren Floats innerhalb desselben Block-Formatierungskontexts.
Hinweis:
Wenn ein Element nur schwebende Elemente enthält, fällt seine Höhe auf Null. Wenn Sie möchten, dass es immer in der Lage ist, die Größe zu ändern, sodass es schwebende Elemente darin enthält, setzen Sie den Wert der display-Eigenschaft des Elements auf flow-root.
#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
<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
.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
<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
.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
<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
.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%;
}
Spezifikationen
| Specification |
|---|
| Cascading Style Sheets Level 2 # propdef-clear |
| CSS Logical Properties and Values Level 1 # float-clear |