Miten poistaa liikkeestä（Clearfix）

Opi, miten käyttää clearfix-tekniikkaa poistaaksesi liikkeestä.

Clearfix-tekniikka

Jos elementti on korkeampi kuin sen sisältävä elementti ja se on liukunut, se vuotaa konttoristaan.

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

Esimerkki

.clearfix {
  overflow: auto;
}

Kokeile itse

Niin kauan kuin voit hallita ulko- ja sisätilaa:overflow: auto; Clearfixin poistaminen liikkeestä toimii hyvin (muuten saatat nähdä vierityspalkin).

Kuitenkin, uuden ja modernin clearfix-tekniikan käyttö on turvallisempaa, ja suurin osa verkkosivustoista käyttää seuraavaa koodia:

Esimerkki

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

Kokeile itse

Liittyvät sivut

Oppitunti:CSS kelluva