Aké metódy blokovania toku (clearing) poznáte a v…

overflow: hidden; alebo overflow: auto;: Používa sa na rodičovský prvok prvku(y) s float. Vytvára nový kontext formátovania bloku (BFC), čím rodič zahrnie okolitné prvky do svojej výšky.

Situácia: Najjednoduchší spôsob, ako skryť obsah, ktorý presahuje hranice prvku, alebo aplikovať posúvanie, ale tiež funguje ako metóda čistenia.

clear: both;: Používa sa na prvok, ktorý by nemal obklopovať predchádzajúce prvky s float. Tento prvok bude umiestnený pod všetkými okolitými prvkami.

Situácia: Keď je potrebné vytvoriť nový riadok alebo sekciu po prvkoch, ktoré sa navzájom obklopujú.

Metóda clearfix (pseudo-prvky ::after): Pridáva pseudo-prvok k rodičovskému kontajneru s určitými vlastnosťami, napodobňujúc správanie clear: both;, ale bez nutnosti pridávať ďalšie HTML prvky.

.clearfix::after {
    content: ""; /* Povinný obsah na zobrazenie pseudo-prvku */
    display: table; /* Vytvára nový kontext formátovania bloku, ako overflow: hidden; */
    clear: both; /* Aplikuje čistenie */
}

Situácia: Najčastejšie a odporúčané spôsob čistenia, ktorý je čistý a neporušuje štruktúru markup. Používa sa na rodičovský prvok obsahujúci okoloidúce prvky.

Použitie display: flex alebo display: grid: Moderné metódy rozloženia, ktoré nevyžadujú obalovanie na umiestnenie prvkov, čím sa odstraňuje potreba čistenia. Situácia: Pri tvorbe zložitých rozložení alebo keď je potrebná flexibilnejšia kontrola rozmiestnenia prvkov.
Pridanie ďalšieho prvku s clear: both; (staršia metóda): Vloží prázdny HTML prvok po okoloidúcich prvkoch a aplikuje naň clear: both;. Situácia: Považuje sa za zastaraný a nežiaduci prístup, pretože pridáva nadbytočný HTML.

Aké metódy blokovania toku (clearing) poznáte a v akých situáciách sa používajú?