CSS asettelu - clear ja clearfix

clear-attribuutti

clear Atribuutti määrittää, mitkä elementit voivat liikkua poistetun elementin viereen ja mikä puoli.

clear Atribuutti voi asettaa seuraavista arvoista yhden:

  • none - Sallitaan molemmat puolet liikkuvia elementtejä. Oletusarvo
  • left - Vasemman puolen liikkuvia elementtejä ei sallita
  • right - Oikean puolen liikkuvia elementtejä ei sallita
  • both - Vasemman tai oikean puolen liikkuvia elementtejä ei sallita
  • inherit - Elementti perii vanhempiensa clear-arvon

käyttää clear Atribuutin yleisimpiä käyttötapoja on, kun elementtiä käytetään float Atribuutin jälkeen.

Poistaessasi liikkuvuutta, sinun tulisi yhdenmukaistaa sen ja liikkuvuuden: jos jokin elementti liukuu vasemmalle, sinun tulisi poistaa vasemman puolen liikkuvuus. Liikkuvat elementit jatkavat liikkumistaan, mutta poistetut elementit näytetään niiden alapuolella.

Seuraavassa esimerkissä poistetaan vasemmalta suuntautuva liukuvuus. Tämä tarkoittaa, että (div:n) vasemmalla puolella ei ole sallittu liukuvia elementtejä:

Esimerkki

div {
  clear: left;
}

Kokeile itse

clearfix Hack

Jos elementti on korkeampi kuin sisältävä elementti ja se on liukuvaa, se 'tippuu yli' sen kontin ulkopuolelle:

Sitten voimme lisätä sisältöelementtiin overflow: auto; ratkaistaksemme tämän ongelman:

Esimerkki

.clearfix {
  overflow: auto;
}

Kokeile itse

Jos voit hallita ulkoreunaa ja sisäreunaa (muuten saattaa näkyä pyyhkäisyviiva), overflow: auto clearfix toimii hyvin. Mutta uuden modernin clearfix hack -teknologian käyttäminen on turvallisempaa, ja seuraava koodi on käytetty useimmissa verkkosivustoissa:

Esimerkki

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Kokeile itse

Opit tämän hieman myöhemmin luvussa ::after Pseudoelementti.