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

float odstráni prvok z bežného toku dokumentu, umožňujúc iným prvkom (zvyčajne textovým alebo inline prvkom) ho obklopiť z uvedenej strany (left, right).

Základné princípy:

• Odstránenie z toku: Prvok s float nezaberá miesto v bežnom toku dokumentu.
• Obklopenie: Susedné blokové prvky nezaberú miesto prvku s float, a ich obsah (inline prvky) ho obklopia z uvedenej strany.
• Vplyv na rodiča: Výška rodičovského kontajnera, ktorý obsahuje iba float prvky, sa môže zmenšiť, ignorujúc ich výšku.
• clear: Vlastnosť clear (left, right, both) sa používa na zabránenie obklopenia prvkami, ktoré sú po float prvku.

Príklad:

.image {
  float: left; /* Obrázok sa posunie doľava */
  margin-right: 10px; /* Pridáme pravý okraj pre text */
}

.text {
  /* Text bude obklopovať obrázok */
}

Odporúčania:

• Použitie float je zastarané pre tvorbu zložitých rozložení a bolo nahradené Flexboxom alebo Gridom.
• float môže byť stále užitočný na vytváranie efektu obklopenia obrázkov textom.
• Aby nedošlo ku kolapsu rodičovského kontajnera pri použití float, sa používajú techniky ako "clearfix" alebo overflow: hidden/auto na rodičovi.