Milliseid voolu keelu (clearing) meetodeid teate ja kus neid rakendatakse?

• clear: both;: Kõige levinum ja usaldusväärsem meetod. Rakendub elemendile, mis peaks paiknema kõigi eelnevate ujuvate elementide all. See võib olla eraldi tühi element või üks paigutuselementidest.
• Tühi elemendi lisamine clear: both;-ga: Mõnikord kasutatakse tagamaks, et ujutamise vältimine on kindel, eriti keerukate paigutuste puhul. See on tühi div või muu blokielement.
• Pseudo-element :after koos clear: both;: Kaasaegsem lähenemine. Rakendub ujuvate elementide konteinerile. Loob "virtuaalse" elemendi pärast konteineri sisu, mis taastab ujutamise.

/* Näide pseudo-elemendi :after kasutamisest */
.container::after {
  content: ""; /* Pseudo-elemendi kohustuslik omadus */
  display: table; /* Sageli kasutatakse parema ühilduvuse jaoks */
  clear: both;
}

• overflow: hidden; või overflow: auto;: Rakendub ujuvate elementide konteinerile. Loob uue blokiformaadi konteksti, mis "puhastab" ujutamise. Kuid see võib lõigata sisu või tekitada kerimisribad, kui sisu ületab konteineri piirid.
• Formaadi blokiline kontekst (BFC): Kõik eelnevad meetodid, välja arvatud selge tühi element, loovad mingil moel uue BFC, mis viib ujutamise nullimiseni. BFC loomise omadused:
  • float (mitte nullväärtus)
  • overflow (väärtus, mis erineb visible-st)
  • display: inline-block
  • position: absolute või fixed
  • display: flow-root; (suhteliselt uus, selgelt loob BFC)

Tabel võrdluseks:

Meetod	Rakendub millele	Kuidas nullida	Potentsiaalsed probleemid
clear: both;	Element	Selge nullimine	Täiendav element
Tühi element + clear	Tühi element	Selge nullimine	Täiendav element
:after + clear	Konteiner	Pseudo-elemendi kasutamine	Keerulisem algajatele mõista
overflow: hidden/auto;	Konteiner	BFC loomine	Lõikamine/kerimine
BFC loomine teise omadusega	Konteiner	BFC loomine	Ebatäpsus, kõrvalmõjud
display: flow-root;	Konteiner	Selge BFC loomine	Vanemate brauserite tugi piiratud

Kus kasutatakse:

• Et element pärast ujuvaid elemente hakkaks nende all näituma.
• Et konteiner, mis sisaldab ainult ujuvaid elemente, ei kahaneks kõrguse tõttu.
• Keerukates paigutustes dokumenti voogu kontrollimiseks ujuvate elementide ümber.