CSS Layout - selkeä ja selkeä korjaus


Sisällysluettelo

    Näytä sisällysluettelo


CSS-ominaisuus 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.

Esimerkki

Tämä esimerkki tyhjentää kellun vasemmalla. Tässä se tarkoittaa, että elementti työnnetään vasemmalle kelluvan -elementin alle:

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>



Selkeä korjaus Hack

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:

Without Clearfix

With Clearfix

Esimerkki

.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:

Esimerkki

.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.