Jakie metody blokowania przepływu (clearing) znasz i w jakich sytuacjach są stosowane?

• overflow: hidden; lub overflow: auto;: Dotyczy elementu nadrzędnego elementu(-ów) z float. Tworzy nowy kontekst formatowania bloku (BFC), zmuszając rodzica do obejmowania elementów otaczających w swojej wysokości.

Sytuacja: Najprostszy sposób, gdy trzeba ukryć zawartość wykraczającą poza granice elementu lub zastosować przewijanie, ale także działa jako metoda czyszczenia.

• clear: both;: Dotyczy elementu, który nie powinien otaczać poprzednich elementów z float. Ten element będzie znajdować się poniżej wszystkich otaczających go elementów.

Sytuacja: Gdy trzeba utworzyć nowy wiersz lub sekcję po elementach, które się nawzajem otaczają.

• Metoda clearfix (pseudo-elementy ::after): Dodaje pseudo-element do elementu nadrzędnego z określonymi właściwościami, imitując zachowanie clear: both;, ale bez konieczności dodawania dodatkowych elementów HTML.

.clearfix::after {
    content: ""; /* Obowiązkowa zawartość do wyświetlenia pseudo-elementu */
    display: table; /* Tworzy nowy kontekst blokowy, jak i overflow: hidden; */
    clear: both; /* Zastosuj czyszczenie */
}

Sytuacja: Najczęstszy i zalecany sposób czyszczenia, który jest czysty i nie zakłóca struktury markup. Dotyczy elementu nadrzędnego zawierającego elementy otaczające.

• Użycie display: flex lub display: grid: Nowoczesne metody układu, które nie wymagają otaczania do rozmieszczania elementów, eliminując potrzebę czyszczenia. Sytuacja: Przy tworzeniu złożonych układów lub gdy potrzebna jest bardziej elastyczna kontrola rozmieszczenia elementów.

• Dodanie dodatkowego elementu z clear: both; (stara metoda): Wstawia pusty element HTML po elementach otaczających i stosuje do niego clear: both;. Sytuacja: Uważane za przestarzałe i niepożądane podejście, ponieważ dodaje nadmiarowy HTML.