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

Plávajúce prvky (float) v CSS sú vlastnosťou, ktorá umožňuje presunúť prvok z bežného toku dokumentu a umiestniť ho vľavo alebo vpravo od jeho kontajnera. Susedné prvky a text budú obklopovať tento plávajúci prvok.

Hlavné hodnoty vlastnosti float:

• left: Prvok pláva vľavo.
• right: Prvok pláva vpravo.
• none: Prvok zostáva v bežnom toku (predvolená hodnota).
• inherit: Dedi sa od rodiča.

Príklady použitia:

.float-left {
  float: left; /* Prvok bude plávať vľavo */
  margin-right: 10px; /* Pridávame medzeru vpravo od textu */
}

.float-right {
  float: right; /* Prvok bude plávať vpravo */
  margin-left: 10px; /* Pridávame medzeru vľavo od textu */
}

Charakteristiky správania:

• Plávajúci prvok je odstránený z bežného toku dokumentu, ale ovplyvňuje rozloženie susedných prvkov a textu.
• Rodič plávajúceho prvku sa môže "zmrštiť", pretože plávajúce deti neovplyvňujú jeho výšku v bežnom toku. Aby sa tomu zabránilo, používajú sa techniky ako clear alebo iné, napríklad overflow: hidden alebo Flexbox/Grid.
• Vlastnosť clear umožňuje určiť, na ktorej strane nemôžu byť plávajúce prvky:

  .clear-left {
    clear: left; /* Prvok bude umiestnený pod akýmkoľvek plávajúcim prvkom vľavo */
  }
  
  .clear-right {
    clear: right; /* Prvok bude umiestnený pod akýmkoľvek plávajúcim prvkom vpravo */
  }
  
  .clear-both {
    clear: both; /* Prvok bude umiestnený pod všetkými plávajúcimi prvkami z oboch strán */
  }
  

Historicky sa plávajúce prvky používali na vytváranie viacstĺpcových rozložení, ale dnes je vhodnejšie použiť Flexbox alebo CSS Grid kvôli ich väčšej flexibilite a predvídateľnosti. Napriek tomu je float stále užitočný na obkolesovanie textom obrázkov alebo iných prvkov.