Obtékání obsahu (float)

Vlastnost float původně sloužila k obtékání textu kolem obrázků, podobně jako v tištěných publikacích. Element, kterému nastavíte float, je "vytažen" z normálního toku dokumentu a umístěn na levou nebo pravou stranu svého rodičovského kontejneru. Ostatní obsah pak element obtéká.

.obrazek-float {
    float: left; /* Obrázek se posune vlevo a text ho obtéká zprava */
    margin-right: 15px; /* Přidá mezeru mezi obrázek a text */
    width: 200px;
}

Hodnoty float jsou:

• left: Element se zarovná vlevo.
• right: Element se zarovná vpravo.
• none: Element se nefloatuje (výchozí).

Problémy s float a řešení (clear)

Když element floatujete, je vyjmut z normálního toku dokumentu, což může způsobit neočekávané chování rodičovských elementů (např. rodičovský element se "zhroutí", pokud obsahuje pouze floatované děti). Pro vyřešení těchto problémů se používá vlastnost clear.

Vlastnost clear říká elementu, aby "vyčistil" floatování předchozích floatovaných elementů, což znamená, že element s clear se nebude umísťovat vedle floatovaného elementu.

• clear: left;: Vyčistí floaty vlevo.
• clear: right;: Vyčistí floaty vpravo.
• clear: both;: Vyčistí floaty na obou stranách (nejčastěji používané).

Nejčastější způsob použití clear je vytvoření speciální třídy nebo použití "clearfix" hacku, který přidá pseudo-element s clear: both na rodičovský element.

/* Clearfix hack pro rodičovský element, který obsahuje floatované děti */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Použití v HTML */
<div class="kontejner clearfix">
    <img src="obrazek.jpg" style="float: left;">
    <p>Text obtékající obrázek.</p>
</div>

V moderním CSS se pro rozložení stránky (layout) mnohem častěji používají technologie jako Flexbox a CSS Grid, které jsou pro tyto účely mnohem robustnější a jednodušší než float.