Jakie metody zakazu przepływu (clearing) znasz i gdzie są stosowane?

• clear: both;: Najbardziej powszechna i niezawodna metoda. Dotyczy elementu, który ma być umieszczony poniżej wszystkich poprzednich elementów pływających. Może to być oddzielny pusty element lub jeden z elementów układu.
• Dodanie pustego elementu z clear: both;: Czasami używane do gwarantowanego wyczyszczenia przepływu, szczególnie przy pracy ze złożonymi układami. To pusty div lub inny element blokowy.
• Pseudo-element :after z clear: both;: Bardziej nowoczesne podejście. Dotyczy kontenera elementów pływających. Tworzy "wirtualny" element po ostatniej zawartości kontenera, tym samym resetując przepływ wewnętrzny.

/* Przykład użycia pseudo-elementu :after */
.container::after {
  content: ""; /* Wymagana właściwość dla pseudo-elementów */
  display: table; /* Często używane dla lepszej kompatybilności */
  clear: both;
}

• overflow: hidden; lub overflow: auto;: Dotyczy kontenera elementów pływających. Tworzy nowy kontekst formatowania blokowego, który "czyści" przepływ wewnętrzny. Jednak może to obcinać zawartość lub tworzyć paski przewijania, jeśli zawartość wykracza poza granice kontenera.
• Kontekst formatowania blokowego (BFC): Wszystkie powyższe metody, z wyjątkiem jawnego pustego elementu, w jakiś sposób tworzą nowy BFC, co prowadzi do resetu przepływu. Właściwości tworzące BFC:
  • float (wartość różna od zera)
  • overflow (wartość inna niż visible)
  • display: inline-block
  • position: absolute lub fixed
  • display: flow-root; (stosunkowo nowy, jawnie tworzy BFC)

Tabela porównawcza metod:

Metoda	Dotyczy czego	Sposób resetu	Potencjalne problemy
clear: both;	Element	Jawny reset	Dodatkowy element
Pusty element + clear	Pusty element	Jawny reset	Dodatkowy element
:after + clear	Kontener	Pseudo-element	Trudniejsze do zrozumienia dla początkujących
overflow: hidden/auto;	Kontener	Tworzenie BFC	Przycinanie / paski przewijania
Tworzenie BFC inną właściwością	Kontener	Tworzenie BFC	Nieintencjonalne, efekty uboczne
display: flow-root;	Kontener	Jawne tworzenie BFC	Ograniczone wsparcie w starszych przeglądarkach

Gdzie stosować:

• Aby element po elementach pływających zaczynał się wyświetlać pod nimi.
• Aby kontener zawierający tylko elementy pływające nie zapadał się na wysokość.
• W złożonych układach do kontrolowania przepływu dokumentu wokół elementów pływających.