clear
Wenn wir die Eigenschaft float
verwenden und wollen Für das nächste Element unten (nicht rechts oder links) müssen wir clear
verwenden Eigentum.
Die Eigenschaft clear
gibt an, was sollte mit dem Element passieren, das sich neben einem schwebenden Element befindet.
Die Eigenschaft clear
kann eine der folgenden Eigenschaften haben: folgende Werte:
none
- Das Element wird nicht unter linke oder rechte schwebende Elemente verschoben. Dies ist die Standardeinstellung
left
- Das Element wird unter die linken schwebenden Elemente geschoben
right
- Das Element wird unter die rechten schwebenden Elemente geschoben
both
- Das Element wird sowohl unter das linke als auch das rechte schwebende Element geschoben
inherit
- Das Element erbt den klaren Wert von seinem übergeordneten Element
Wenn Sie Floats löschen, sollten Sie das Clear dem Float zuordnen: Wenn ein Element nach links schwebt, dann sollten Sie nach links ausweichen. Ihr schwebendes Element wird weiterhin schweben, aber das gelöschte Element wird darunter im Web angezeigt Seite.
In diesem Beispiel wird der Float nach links gelöscht. Hier bedeutet es, dass
div1 {
float: left;
}
div2 {
clear: left;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div2 {
padding: 10px;
border: 3px solid red;
}
.div3 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div4 {
padding: 10px;
border: 3px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>
<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</body>
</html>
Wenn ein schwebendes Element höher ist als das enthaltende Element, wird es wird außerhalb seines Containers „überlaufen“. Wir können dann einen Clearfix-Hack hinzufügen Löse dieses Problem:
.clearfix {
overflow: auto;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
Der overflow: auto
Clearfix funktioniert gut, solange Sie in der Lage sind, die Kontrolle über Ihre Ränder und Abstände zu behalten (andernfalls würden Sie möglicherweise werden Bildlaufleisten angezeigt). Der Der neue, moderne Clearfix-Hack ist jedoch sicherer zu verwenden und der folgende Code wird für die meisten Webseiten verwendet:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
Mehr über das Pseudoelement ::after
erfahren Sie in einem späteren Kapitel.