Jak fungují plovoucí prvky (floats) v CSS?

Prvky s plovoucím (float) v CSS jsou odstraněny z normálního toku dokumentu a posunuty ve stanoveném směru (vlevo nebo vpravo) uvnitř svého obsahového bloku. Sousední řádkové prvky a obsah začínají obklopovat plovoucí prvek z opačné strany.

Hlavní vlastnosti float:

left: Prvek se posune vlevo.
right: Prvek se posune vpravo.
none: Prvek zůstává v normálním toku (výchozí hodnota).
inherit: Dědí hodnotu od rodiče.

Používaly se často k vytváření více sloupcových rozložení před příchodem Flexboxu a Gridu.

Charakteristiky chování:

Plovoucí prvek se stává blokem, bez ohledu na původní typ zobrazení.
Výška rodičovského kontejneru nezohledňuje výšku plovoucího prvku, což může vést ke "seskoku" kontejneru. K řešení se používají metody čištění (clearing).

Metody čištění:

Vlastnost clear: Používá se na prvek, aby zabránila jeho obklopení plovoucími prvky. Hodnoty: left, right, both, none, inherit.
```
/* Prvek nebude obklopovat plovoucí prvky z obou stran */
.clear-both {
  clear: both;
}
```
Clearfix technika: Přidání pseudo-prvku :after k rodičovskému kontejneru s clear: both a dalšími styly, aby se zabránilo sesypání.
```
/* klasický clearfix */
.clearfix::after {
  content: "";
  display: table; /* nebo "block" */
  clear: both;
}
```

Navzdory vývoji modernějších metod rozvržení je float stále užitečný pro malé prvky, například pro umístění obrázku uvnitř textu.