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

float odstraní prvek z normálního toku dokumentu, což umožňuje dalším prvkům (obvykle textovým nebo inline prvkům) jej obklopit ze strany uvedené vlastností (left, right).

Základní principy:

• Odstranění z toku: Prvek s float nezabírá místo v normálním toku dokumentu.
• Obklopení: Sousední blokové prvky nezaberou místo prvku s float, a jejich obsah (inline prvky) jej obklopí ze strany uvedené vlastností.
• Vliv na rodiče: Výška rodičovského kontejneru, který obsahuje pouze float prvky, může se zmenšit, ignorujíc jejich výšku.
• clear: Vlastnost clear (left, right, both) se používá k zabránění obklopení prvky, které jsou po float prvku.

Příklad:

.image {
  float: left; /* Obrázek se posune vlevo */
  margin-right: 10px; /* Přidáme pravý okraj pro text */
}

.text {
  /* Text bude obklopovat obrázek */
}

Doporučení:

• Použití float je zastaralé pro tvorbu složitých rozvržení a bylo nahrazeno Flexboxem nebo Gridem.
• float může být stále užitečný pro vytváření efektu obklopení obrázků textem.
• Aby nedošlo ke kolapsu rodičovského kontejneru při použití float, používají se techniky jako "clearfix" nebo overflow: hidden/auto na rodiči.