tyhjennä
Kun käytämme float
-ominaisuutta, ja haluamme seuraavaa elementtiä alla (ei oikealla tai vasemmalla), meidän on käytettävä tyhjennä
omaisuutta.
Ominaisuus clear
määrittää mitä pitäisi tapahtua kelluvan elementin vieressä olevan elementin kanssa.
clear
-ominaisuudella voi olla jokin seuraavista seuraavat arvot:
none
- Elementtiä ei työnnetä vasemman tai oikean kelluvan elementin alle. Tämä on oletusarvo
left
- Elementti työnnetään vasemman kelluvien elementtien alle
right
- Elementti työnnetään oikeanpuoleisten kelluvien elementtien alle
both
- Elementti työnnetään sekä vasemman että oikeanpuoleisen kelluvan elementin alle
inherit
- Elementti perii selkeän arvon vanhemmalta
Kun tyhjennät kellukkeet, sinun tulee sovittaa kirkas kellumaan: Jos elementti kelluu vasemmalle, sinun tulee tyhjentää vasemmalle. Kelluva elementtisi jatkaa kellumista, mutta tyhjennetty elementti näkyy sen alapuolella verkossa sivu.
Tämä esimerkki tyhjentää kellun vasemmalla. Tässä se tarkoittaa, että
div1 {
float: left;
}
div2 {
clear: left;
}
Kokeile itse →
<!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>
Jos kelluva elementti on pitempi kuin sisältävä elementti, se "vuotaa yli" säiliönsä ulkopuolelle. Voimme sitten lisätä siihen clearfix-hakkeroinnin ratkaise Tämä ongelma:
.clearfix {
overflow: auto;
}
Kokeile itse →
<!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>
overflow: auto
clearfix toimii hyvin niin kauan kuin pystyt pitämään marginaalisi ja täytesi hallinnassa (muuten saattaa nähdä vierityspalkit). The uusi, moderni clearfix-hakkerointi on kuitenkin turvallisempi käyttää, ja seuraavaa koodia käytetään useimmilla verkkosivuilla:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Kokeile itse →
<!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>
Saat lisätietoja ::after
-pseudoelementistä myöhemmässä luvussa.