Jaké metody zákazu průtoku (clearing) znáte a kde se používají?

• clear: both;: Nejčastější a nejspolehlivější metoda. Používá se na prvek, který má být umístěn pod všemi předchozími floatujícími prvky. Může to být samostatný prázdný prvek nebo jeden z prvků rozvržení.
• Přidání prázdného prvku s clear: both;: Někdy se používá k zajištění spolehlivého vyčištění obtékání, zejména při práci s složitými rozvrženími. Jedná se o prázdný div nebo jiný blokový prvek.
• Pseudo-prvek :after s clear: both;: Modernější přístup. Používá se na kontejneru floatujících prvků. Vytvoří "virtuální" prvek za posledním obsahem kontejneru, čímž resetuje obtékání uvnitř.

/* Příklad použití pseudo-prvku :after */
.container::after {
  content: ""; /* Povinná vlastnost pro pseudo-prvky */
  display: table; /* Často používané pro lepší kompatibilitu */
  clear: both;
}

• overflow: hidden; nebo overflow: auto;: Používá se na kontejneru floatujících prvků. Vytváří nový blokový kontext formátování, který "čistí" obtékání uvnitř. Nicméně to může oříznout obsah nebo vytvořit posuvné pruhy, pokud obsah přesahuje hranice kontejneru.
• Blokový kontext formátování (BFC): Všechny výše uvedené metody, kromě zjevného prázdného prvku, nějakým způsobem vytvářejí nový BFC, což vede k resetu obtékání. Vlastnosti, které vytvářejí BFC:
  • float (nenulová hodnota)
  • overflow (hodnota odlišná od visible)
  • display: inline-block
  • position: absolute nebo fixed
  • display: flow-root; (relativně nová, explicitně vytváří BFC)

Tabulka srovnání metod:

Metoda	Použití na co	Způsob resetu	Potenciální problémy
clear: both;	Prvek	Explicitní reset	Další prvek
Prázdný prvek + clear	Prázdný prvek	Explicitní reset	Další prvek
:after + clear	Kontejner	Pseudo-prvek	Složitější pro začátečníky
overflow: hidden/auto;	Kontejner	Vytvoření BFC	Oříznutí/posuvy
Vytvoření BFC jinou vlastností	Kontejner	Vytvoření BFC	Nezáměrné, vedlejší efekty
display: flow-root;	Kontejner	Explicitní vytvoření BFC	Nedostatečná podpora ve starších prohlížečích

Kde se používá:

• Aby prvek po floatujících prvcích začal zobrazovat pod nimi.
• Aby kontejner obsahující pouze floatující prvky nezkolaboval na výšku.
• V složitých rozvrženích pro kontrolu toku dokumentu kolem floatujících prvků.