Aké metódy clearing poznáte a v akých situáciách sa používajú?

Metódy na zabránenie obtoku:

• clear: left; — zakazuje obtok zľava. Používa sa, keď prvok nemá byť umiestnený vedľa floatujúcich prvkov naľavo.
• clear: right; — zakazuje obtok sprava. Používa sa, keď prvok nemá byť umiestnený vedľa floatujúcich prvkov napravo.
• clear: both; — zakazuje obtok z oboch strán. Používa sa, keď prvok nemá byť umiestnený vedľa žiadnych floatujúcich prvkov. Toto je najbežnejšia možnosť.
• clear: none; (predvolená hodnota) — umožňuje obtok.

Použitie:

• Na zabránenie "zrútenia" rodičovského kontajnera: Ak všetky deti rodiča floatujú (majú float), rodičovský kontajner stráca svoju výšku a zrúti sa. Pridaním prvku s clear: both; po floatujúcich prvkoch vo vnútri rodiča alebo použitím pseudo-objektu ::after s clear: both; sa tento problém vyrieši.
• Pre správne rozmiestnenie prvkov po floatujúcich: Ak sa bežné (ne floatujúce) prvky majú umiestniť pod floatujúcimi a nie vedľa nich.
• Pre vytváranie "riadkov" alebo "riadov" v float layoutoch: Keď sa prvky s float majú usporiadať do viacerých riadkov, clear sa používa na začatie nového riadku.

Príklad použitia pseudo-objektu ::after na čistenie:

.clearfix::after {
  content: ""; /* Dôležité pre zobrazenie pseudo-objektu */
  display: table; /* Alebo block */
  clear: both; /* Hlavná vlastnosť na čistenie */
}

Táto trieda clearfix sa následne aplikuje na rodičovský prvok obsahujúci floatujúce deti.