rensa
När vi använder egenskapen float
, och vi vill nästa element nedan (inte till höger eller vänster), måste vi använda clear
fast egendom.
Egenskapen clear
anger vad ska ske med elementet som är bredvid ett flytande element.
Egenskapen clear
kan ha en av följande värden:
none
- Elementet skjuts inte under vänster eller höger flytande element. Detta är standard
left
- Elementet skjuts under vänster flytande element
right
- Elementet skjuts under höger flytande element
both
- Elementet skjuts under både vänster och höger flytande element
inherit
- Elementet ärver det tydliga värdet från sin förälder
När du rensar flöten bör du matcha den klara med flöten: Om ett element är flytande till vänster, så bör du rensa åt vänster. Ditt flytande element kommer att fortsätta att flyta, men det rensade elementet kommer att visas under det på webben sida.
Detta exempel rensar flottören till vänster. Här betyder det att
div1 {
float: left;
}
div2 {
clear: left;
}
Prova själv →
<!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>
Om ett flytande element är högre än det innehållande elementet, är det kommer att "svämma över" utanför sin behållare. Vi kan sedan lägga till ett clearfix-hack till lös detta problem:
.clearfix {
overflow: auto;
}
Prova själv →
<!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>
Clearfixen overflow: auto
fungerar bra så länge du kan ha kontroll över dina marginaler och utfyllnad (annars kan se rullningslister). De nytt, modernt clearfix-hack är dock säkrare att använda, och följande kod används för de flesta webbsidor:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Prova själv →
<!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>
Du kommer att lära dig mer om pseudoelementet ::after
i ett senare kapitel.