Co jsou plovoucí prvky (floats) v CSS?

Vlastnost float v CSS umožňuje prvku "plavat" vlevo nebo vpravo od obklopujícího obsahu.

Hlavní vlastnosti:

• Posun: Prvek s aplikovanou vlastností float se posune k levému nebo pravému okraji svého rodičovského kontejneru (nebo jiného float prvku).
• Obalování: Normální blokový nebo řádkový obsah (text, obrázky) obklopuje float prvek.
• Kontext toku: Float prvky jsou částečně vyňaty z normálního toku dokumentu, ale ovlivňují pozicování ostatních prvků.
• Použití: Původně se používalo k organizaci sloupců nebo umístění obrázků s textem kolem nich. V moderním návrhu se častěji používají Flexbox nebo Grid.

Typické hodnoty vlastnosti float:

• left: Prvek plave vlevo.
• right: Prvek plave vpravo.
• none: Prvek neplave (výchozí hodnota).
• inherit: Dědí hodnotu od rodiče.
• initial: Nastavuje výchozí hodnotu.

Problémy s float:

• Seskupení rodiče: Rodičovský kontejner obsahující pouze float prvky může se seskupit na výšku.
• Čištění: Aby se zabránilo obalování následujícími prvky, je třeba použít vlastnost clear.

.image-float {
  float: left; /* Obrázek bude plavat vlevo */
  margin-right: 10px; /* Okraj vpravo od obrázku */
}

.text-content {
  /* Tento text bude obalovat obrázek */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Čištění toku po float prvcích */
}