Co jsou plovoucí prvky (float) v CSS?

Vlečné prvky (float) v CSS jsou vlastností, která umožňuje přesunout prvek z běžného toku dokumentu a umístit jej vlevo nebo vpravo od jeho kontejneru. Sousední prvky a text budou obklopovat tento vlečný prvek.

Hlavní hodnoty vlastnosti float:

• left: Prvek plave vlevo.
• right: Prvek plave vpravo.
• none: Prvek zůstává v běžném toku (výchozí hodnota).
• inherit: Dědí hodnotu od rodiče.

Příklady použití:

.float-left {
  float: left; /* Prvek bude plavat vlevo */
  margin-right: 10px; /* Přidává odsazení vpravo pro text */
}

.float-right {
  float: right; /* Prvek bude plavat vpravo */
  margin-left: 10px; /* Přidává odsazení vlevo pro text */
}

Vlastnosti chování:

• Plovoucí prvek je odstraněn z běžného toku dokumentu, ale ovlivňuje rozložení sousedních prvků a textu.
• Rodič plovoucího prvku může "se smrsknout", protože plovoucí děti neovlivňují jeho výšku v běžném toku. Aby se tomu zabránilo, používají se techniky jako clear nebo jiné, například overflow: hidden nebo Flexbox/Grid.
• Vlastnost clear umožňuje určit, na které straně nesmí být plovoucí prvky:

  .clear-left {
    clear: left; /* Prvek bude umístěn pod jakýmkoli levým plovoucím prvkem */
  }
  
  .clear-right {
    clear: right; /* Prvek bude umístěn pod jakýmkoli pravým plovoucím prvkem */
  }
  
  .clear-both {
    clear: both; /* Prvek bude umístěn pod jakýmkoli plovoucím prvkem z obou stran */
  }
  

Historicky se plovoucí prvky používaly k vytváření více sloupcových rozložení, ale dnes je vhodnější používat Flexbox nebo CSS Grid kvůli jejich větší flexibilitě a předvídatelnosti. Přesto je float stále užitečný pro obtékání textu kolem obrázků nebo jiných prvků.