Die CSS Eigenschaft clear
legt fest, ob ein Element unter einem fließenden (float) Element verschoben werden muss, die ihm vorausgehen. Die clear
Eigenschaft gilt für fließende und nicht fließenden Elemente.
Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.
Wenn sie auf nicht fließende Blöcke angewendet wird, verschiebt sie den Rahmen (border edge) des Elements nach unten, bis sie unter den Rand (margin edge) aller relevanten fließende Elemente liegt. Der obere Rand (margin) des nicht fließenden Blocks kollabiert.
Vertikale Ränder (margins
) zwischen zwei fließenden Elementen hingegen kollabieren nicht. Wenn sie auf fließenden Elemente angewendet werden, wird der Rand des unteren Elements unter den Rand aller relevanten fließenden Elementen verschoben. Dies wirkt sich auf die Position späterer fließenden Elementen aus, da spätere fließende Elemente nicht höher positioniert werden können als frühere.
Die relevanen fließenden Elemente, deren Fließeigenschaft beendet werden soll, sind die früheren fließenden Elemente mit der selben Blockformatierungskontexts .
Hinweis: Wenn ein Element nur fließenden (float) Elemente enthält, kollabiert seine Höhe zu null. Wenn Sie möchten, dass es immer in der Lage ist, seine Größe zu ändern, so dass es in seinem Inneren schwebende Elemente enthält, müssen Sie das float
für seine Kinder selbst beenden. Dies wird clearfix genannt, und eine Weg, besteht darin, ein clear
zu einem ersetzten ::after
Pseudoelement hinzuzufügen.
#container:after { content: ""; display: block; clear: both; }
Syntax
/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Global values */
clear: inherit;
clear: initial;
clear: unset;
Werte
none
- Der Umfluss von vorherigen Elementen wird nicht beendet.
left
- Der Umfluss von vorherigen Elementen wird auf der linken Seite beendet.
right
- Der Umfluss von vorherigen Elementen wird auf der rechten Seite beendet.
both
- Der Umfluss von vorherigen Elementen wird auf beiden Seiten beendet.
inline-start
- Beendet die Fließeigenschaft des Elementes, das nach unten an den Startrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung
ltr
(von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtungrtl
(von rechts nach links) ist, dann wird es rechtsseitig sein. inline-end
- Beendet die Fließeigenschaft des Elementes, das nach unten an den Endrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung
ltr
(von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtungrtl
(von rechts nach links) ist, dann wird es rechtsseitig sein. inherit
- Der Wert des Elternelements wird geerbt.
Formale Definition
Initialwert | none |
---|---|
Anwendbar auf | Blocklevel Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
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: #fff;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
Ergebnis
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: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
Ergebnis
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: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 45%;
}
Ergebnis
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Logical Properties and Values Level 1 Die Definition von 'float and clear' in dieser Spezifikation. |
Bearbeiterentwurf | Die Werte inline-start und inline-end hinzugefügt. |
CSS Level 2 (Revision 1) Die Definition von 'clear' in dieser Spezifikation. |
Empfehlung | Keine signifikanten Änderungen, jedoch werden Details geklärt. |
CSS Level 1 Die Definition von 'clear' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
BCD tables only load in the browser