Ako fungujú plávajúce prvky (floats) v CSS?

Plávajúce prvky (floats) v CSS sú odstránené z bežného toku dokumentu a sú posunuté v určenom smere (doľava alebo doprava) vo vnútri svojho obsahového bloku. Susedné riadkové prvky a obsah začínajú obklopovať plávajúci prvok z opačnej strany.

Hlavné vlastnosti float:

left: Prvok sa posunie doľava.
right: Prvok sa posunie doprava.
none: Prvok zostáva v bežnom toku (predvolená hodnota).
inherit: Dedičná hodnota od rodiča.

Používali sa často na vytváranie viacstĺpcových rozložení pred objavením Flexboxu a Gridu.

Charakteristiky správania:

Plávajúci prvok sa stáva blokom, bez ohľadu na pôvodný typ zobrazenia.
Výška rodičovského kontajnera nezohľadňuje výšku plávajúceho prvku, čo môže viesť k "zrúteniu" kontajnera. Na riešenie sa používajú metódy čistenia (clearing).

Metódy čistenia:

Vlastnosť clear: Používa sa na prvok, aby zabránila jeho obklopeniu plávajúcimi prvkami. Hodnoty: left, right, both, none, inherit.
```
/* Prvok nebude obklopovať plávajúce prvky z oboch strán */
.clear-both {
  clear: both;
}
```
Clearfix technika: Pridanie pseudo- prvku :after k rodičovskému kontajneru s clear: both a ďalšími štýlmi na zabránenie zrútenia.
```
/* klasický clearfix */
.clearfix::after {
  content: "";
  display: table; /* alebo "block" */
  clear: both;
}
```

Napriek vývoju modernejších metód rozloženia je float stále užitočný pre malé prvky, napríklad na umiestnenie obrázka v texte.