Jaké metody blokování toku (clearing) znáte a v jakých situacích se používají?

• overflow: hidden; nebo overflow: auto;: Používá se na rodičovský prvek elementu(y) s float. Vytváří nový kontext formátování bloku (BFC), což způsobí, že rodič zahrne okolní prvky do své výšky.

Situace: Nejjednodušší způsob, jak skrýt obsah přesahující hranice prvku nebo aplikovat posuvník, ale také funguje jako metoda čištění.

• clear: both;: Používá se na prvek, který by neměl obklopovat předchozí prvky s float. Tento prvek bude umístěn pod všemi okolními prvky.

Situace: Když je třeba vytvořit nový řádek nebo sekci po prvcích, které se navzájem obklopují.

• Metoda clearfix (pseudo-prvky ::after): Přidává pseudo-prvek k rodičovskému kontejneru s určitými vlastnostmi, napodobující chování clear: both;, ale bez nutnosti přidávat další HTML prvky.

.clearfix::after {
    content: ""; /* Povinný obsah pro zobrazení pseudo-prvku */
    display: table; /* Vytváří nový kontext formátování bloku, jako overflow: hidden; */
    clear: both; /* Aplikuje čištění */
}

Situace: Nejčastější a doporučený způsob čištění, který je čistý a neporušuje strukturu markup. Používá se na rodičovský prvek obsahující okolní prvky.

• Použití display: flex nebo display: grid: Moderní metody rozvržení, které nevyžadují obalování pro umístění prvků, čímž se odstraňuje potřeba čištění. Situace: Při tvorbě složitých rozvržení nebo když je potřeba flexibilnější kontrola rozložení prvků.

• Přidání dalšího prvku s clear: both; (starší metoda): Vloží prázdný HTML prvek po okolních prvcích a aplikuje na něj clear: both;. Situace: Považuje se za zastaralý a nežádoucí přístup, protože přidává nadbytečný HTML kód.