Milliseid voolu blokeerimise (clearing) meetodeid teate ja millistes olukordades neid rakendatakse?

overflow: hidden; või overflow: auto;: Rakendub vanemelemendile, millel on float. Loob uue bloki formaadikonteksti (BFC), võimaldades vanemal kaasata ümbritsevad elemendid oma kõrgusesse.
Situatsioon: Lihtsaim viis, kui vaja peita sisu, mis ületab elemendi piire, või rakendada kerimist, kuid see toimib ka puhastusmeetodina.

clear: both;: Rakendub elemendile, mis ei tohi ümbritseda eelnevaid float-ga elemente. See element paikneb kõigi ümbritsevate elementide all.
Situatsioon: Kui vaja luua uus rida või jaotis pärast ümbritsevaid elemente.

clearfix meetod ( psevdoelementidega ::after): Lisab vanemkonteinerile psevdoelemendi kindlate omadustega, jäljendades clear: both; käitumist, kuid ei nõua täiendavaid HTML-elemente.

.clearfix::after {
    content: ""; /* Psevdoelemendi kuvamiseks vajalik sisu */
    display: table; /* Loob uue bloki konteksti, nagu `overflow: hidden;` */
    clear: both; /* Rakendab puhastuse */
}

Situatsioon: Kõige levinum ja soovitatav puhastusmeetod, mis on puhas ega riku struktuuri. Rakendub ümbritsevate elementidega vanemele.

Kasutades display: flex või display: grid: Kaasaegsed paigutusmeetodid, mis ei vaja ümbritsemist, seega eemaldades puhastamise vajaduse.
Situatsioon: Käsitleda keerukaid paigutusi või kui on vaja paindlikumat elementide paigutuse juhtimist.

Täiendava elemendi lisamine ja clear: both; kasutamine (vana meetod): Lisab tühja HTML-elemendi pärast ümbritsevaid elemente ja rakendab sellele clear: both;.
Situatsioon: Arvatakse olevat vananenud ja soovimatu lähenemine, kuna see lisab liigset HTML-i.