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 unter (freigemeachten) fließenden Elementen, die ihm vorausgehen, verschoben werden muss. Die clear-Eigenschaft gilt sowohl für fließende als auch nicht fließende 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;
}
Wenn sie auf nicht fließende Blöcke angewendet wird, bewegt sie die Rahmenkante des Elements nach unten, bis sie sich unterhalb der Randkante aller relevanten Fließtextelemente befindet. Der obere Rand des nicht fließenden Blocks kollabiert.
Vertikale Ränder zwischen zwei fließenden Elementen hingegen kollabieren nicht. Wenn sie auf fließende Elemente angewendet wird, wird die Randkante des unteren Elements unterhalb der Randkante aller relevanten Fließtextelemente verschoben. Dies beeinflusst die Position späterer Fließtextelemente, da nachfolgende Fließtextelemente nicht höher positioniert werden können als frühere.
Die Fließtextelemente, die relevant sind, um freigegeben zu werden, sind die früheren innerhalb desselben Blockformatierungskontextes.
Hinweis:
Wenn ein Element nur fließende Elemente enthält, kollabiert seine Höhe zu nichts. Wenn Sie möchten, dass es immer in der Lage ist, sich anzupassen, sodass es fließende Elemente darin enthalten kann, setzen Sie den Wert der display-Eigenschaft des Elements auf flow-root.
#container {
display: flow-root;
}
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 nach unten verschoben wird, um fließende Elemente zu umgehen.
left-
Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um linke Fließtextelemente zu umgehen.
right-
Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um rechte Fließtextelemente zu umgehen.
both-
Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um sowohl linke als auch rechte Fließtextelemente zu umgehen.
inline-start-
Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Fließtextelemente auf der Anfangsseite seines umgebenden Blocks zu umgehen, das heißt die linken Fließtextelemente bei ltr-Skripten und die rechten bei rtl-Skripten.
inline-end-
Ist ein Schlüsselwort, das angibt, dass das Element nach unten verschoben wird, um Fließtextelemente auf der Endseite seines umgebenden Blocks zu umgehen, das heißt die rechten Fließtextelemente bei ltr-Skripten und die linken bei rtl-Skripten.
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 |
Browser-Kompatibilität
Loading…