Aké metódy zákazu prúdenia (clearing) poznáte a kde sa používajú?

• clear: both;: Najbežnejšia a spoľahlivá metóda. Používa sa na prvku, ktorý má byť umiestnený pod všetkými predchádzajúcimi plávajúcimi prvkami. Môže to byť samostatný prázdny prvok alebo jeden z prvkov rozloženia.
• Pridanie prázdneho prvku s clear: both;: Niekedy sa používa na zabezpečenie spoľahlivého vyčistenia obtoku, najmä pri práci s komplexnými rozloženiami. Ide o prázdny div alebo iný blokový prvok.
• Pseudo-prvek :after s clear: both;: Modernejší prístup. Používa sa na kontejnery plávajúcich prvkov. Vytvára "virtuálny" prvok za posledným obsahom kontajnera, čím resetuje obtok vo vnútri.

/* Príklad použitia pseudo-prvku :after */
.container::after {
  content: ""; /* Povinná vlastnosť pre pseudo-prvky */
  display: table; /* Často používané pre lepšiu kompatibilitu */
  clear: both;
}

• overflow: hidden; alebo overflow: auto;: Používa sa na kontejnery plávajúcich prvkov. Vytvára nový blokový kontext formátovania, ktorý "čistí" obtok vo vnútri. Avšak, to môže orezávať obsah alebo vytvárať posuvné pruhy, ak obsah presahuje hranice kontajnera.
• Blokový kontext formátovania (BFC): Všetky vyššie uvedené metódy, okrem zjavného prázdneho prvku, nejako vytvárajú nový BFC, čo vedie k resetovaniu obtoku. Vlastnosti, ktoré vytvárajú BFC:
  • float (ne nulová hodnota)
  • overflow (hodnota odlišná od visible)
  • display: inline-block
  • position: absolute alebo fixed
  • display: flow-root; (relatívne nový, jasne vytvára BFC)

Tabuľka porovnania metód:

Metóda	Použitie na čo	Spôsob resetu	Potenciálne problémy
clear: both;	Prvok	Jasný reset	Dodatočný prvok
Prázdny prvok + clear	Prázdny prvok	Jasný reset	Dodatočný prvok
:after + clear	Kontajner	Pseudo-prvok	Zložitejšie na pochopenie pre začiatočníkov
overflow: hidden/auto;	Kontajner	Vytvorenie BFC	Orezanie/scrollovanie
Vytvorenie BFC inou vlastnosťou	Kontajner	Vytvorenie BFC	Nezáměrné, vedľajšie efekty
display: flow-root;	Kontajner	Jasné vytvorenie BFC	Nedostatočná podpora v starších prehliadačoch

Kde sa používajú:

• Aby prvok po plávajúcich prvkoch začal zobrazovať pod nimi.
• Aby kontajner obsahujúci iba plávajúce prvky sa nezrútil na výšku.
• V zložitých rozloženiach na kontrolu toku dokumentu okolo plávajúcich prvkov.