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

CSS float je lastnosť pozicioniranja, ktorá posúva prvok na jednu zo strán jeho kontajnera (left alebo right), čo umožňuje textu a inline prvkom ho obklopiť. Prvok je odstránený z bežného toku dokumentu, ale zostáva súčasťou rozloženia. Pôvodne sa používal na vytváranie viacstĺpcových rozložení a obklopenie obrázkov textom, ale teraz sa hlavne používa na riešenie špecifických úloh vďaka flexibilnejším a predvídateľnejším metódam, ako je Flexbox a Grid.

Hlavné hodnoty vlastnosti float:

• none: Prvok sa zobrazuje v bežnom toku (predvolená hodnota).
• left: Prvok sa presúva na ľavý okraj kontajnera.
• right: Prvok sa presúva na pravý okraj kontajnera.
• inherit: Dedičná hodnota od rodičovského prvku.

Príklad použitia:

.image {
  float: left;
  margin-right: 15px; /* Priestor napravo od obklopujúceho textu */
}

.text {
  /* Text bude obklopovať prvok s triedou .image */
}

Problémy s floatmi:

• Zrútenie toku (zmrštenie obklopujúceho prvku): Rodičovský prvok obsahujúci iba float prvky sa môže zmrštiť na výšku, pretože tieto prvky nie sú zahrnuté do jeho normálnych rozmerov.
• Prekrývanie prvkov: Susedné prvky môžu prekrývať float prvok, ak ich rozmery nie sú zohľadnené.

Riešenia problémov:

• clear vlastnosť: Nastavuje sa na prvok, ktorý nemá obklopovať float prvok. Hodnoty: left, right, both, none.
• Clearfix technika: Pridanie špeciálnej triedy k rodičovskému prvku alebo použitie pseudo- prvku :after na vynútenie zmrštenia rodiča.

.container::after {
  content: "";
  display: table; /* alebo block */
  clear: both;
}

• Moderné metódy: Použitie Flexbox alebo CSS Grid na vytvorenie zložitých rozložení.

Hoci floaty nie sú hlavným nástrojom pre rozloženie v modernom webe, pochopenie ich fungovania je dôležité pre údržbu starého kódu a riešenie špecifických úloh, ako je obklopenie textu okolo obrázkov.