Čo sú plávajúce prvky (floats) v CSS?

Vlastnosť float v CSS umožňuje prvku "plávať" vľavo alebo vpravo od obklopujúceho obsahu.

Hlavné vlastnosti:

• Posun: Prvok s aplikovanou vlastnosťou float sa posunie k ľavému alebo pravému okraju svojho rodičovského kontajnera (alebo iného float prvku).
• Obalovanie: Bežný blokový alebo riadkový obsah (text, obrázky) obklopuje float prvok.
• Kontext toku: Float prvky sú čiastočne vyňaté z normálneho toku dokumentu, ale ovplyvňujú pozíciu iných prvkov.
• Použitie: Pôvodne sa používalo na organizáciu stĺpcov alebo umiestnenie obrázkov s textom okolo nich. V modernom dizajne sa častejšie používajú Flexbox alebo Grid.

Typické hodnoty vlastnosti float:

• left: Prvok pláva vľavo.
• right: Prvok pláva vpravo.
• none: Prvok nepláva (štandardná hodnota).
• inherit: Dedi hodnotu od rodiča.
• initial: Nastavuje predvolenú hodnotu.

Problémy s float:

• Kolaps rodičovského kontajnera: Kontajner obsahujúci iba float prvky sa môže zrútiť na výšku.
• Čistenie: Aby sa zabránilo obalovaniu nasledujúcimi prvkami, je potrebné použiť vlastnosť clear.

.image-float {
  float: left; /* Obrázok bude plávať vľavo */
  margin-right: 10px; /* Okraj vpravo od obrázka */
}

.text-content {
  /* Tento text bude obklopovať obrázok */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Čistenie toku po float prvkoch */
}