Float

CSS vlastnost float určuje obtékání prvku.

float
hodnoty způsob rozplavání prvku
none prvek nebude obtékán
right prvek bude přišoupnut k pravému okraji, následující text ho bude obtékat
left totéž k levému okraji

Normálně prvky obtékané nejsou. Výchozí hodnota je tedy none.

Prvkům, které okolní text obtéká a které mají nastaveno float: left nebo right, se říká dvěma termíny

Je to to samé.

Aby mohl být prvek obtékaný, musí mít nastavenou šířku -- width.

Obtékaný prvek je vyjmut z toku dokumentu (stejně jako position: absolute). Ostatní prvky, které obtékají, nejsou prvkem nijak ovlivněny, pouze se jim zkracují řádky v prostoru, kde je obtékaný prvek. Toto chování se ale prohlížeč od prohlížeče liší. Obzvlášť zoufale se chovají různé verze Internet Exploreru.

Pomoci vlastnosti clear se dá říci, že se má prvek vykreslovat až pod všemi obtékanými prvky.

Jakmile čemukoliv nastavíte float rozdílné od none, stává se to blokovým prvkem (jakoby display: block).

Podpora

Obtékání nahrazovaných prvků (zpravidla obrázky) je většinou bezproblémové. Jakmile se ale snažíte o obtékání textových prvků, mohou nastat nevysvětlitelné problémy tím spíše, čím složitější konstrukci použijete. Obtékání textových prvků a oblastí stránek tak, aby to fungovalo ve většině prohlížečů, je vyšší dívčí kaskádových stylů.

Podpora vlastnosti float
Prohlížeč Podpora ve verzích
Internet Explorer všechny verze
Firefox všechny verze
Opera všechny verze
Chrome všechny verze

Pokud přepisujete vlastnost float do javascriptu, tak se nedá přepsat klasicky jako jiné CSS vlastnosti, protože slovo "float" je klíčové slovo javascriptu. Pro Internet Explorer se vlastnost přepisuje jako "styleFloat", pro Mozillu a ostatní standardní browsery "cssFloat".

Vlastost float má ještě dvě další hodnoty, které ale nejsou podporované nikde kromě Firefoxu (2019). Jde o hodnoty inline-start a inline-end. Je to téměř totéž, jako left a right, akorát že se to přehodí, pokud je směr textu psaný zprava doleva (rtl).

Obtékání nepravidelných tvarů shape-outside

Chcete-li něco obtékat jinak než do obdélníka, můžete spolu s vlastností float využít CSS vlastnost shape-outside. Jako parametr se zadává nějaký tvar ořezu (circle, ellipse, inset, polygon apod.). Hledejte shape-outside a css shapes. Vzápětí se může hodit i vlastnost clip-path pro oříznutí obtékaného objektu (většinou stejným tvarem). Příklad obtékání kruhu ve čtverci s nastavenými maximálními rozměry a středem kruhu na střed čtverce:

div.krouzek {
    float:right;
    width: 100px; height: 100px;
    shape-outside: circle(100% 100% at 50% 50%);
}

Shape-outside má přípustnou hodnotu i image(). V takovém případě nechá natékat obtékaný text tam, kde je obrázek průhledný. Přesněji řečeno má nastavený alpha kanál na nulu. Pokud děláte letáky pro supermarket, takže chcete nechat obtékat obrázek, který je sice na okrajích průhledný, ale ne úplně, můžete využít vlastnost shape-image-threshold: 0.2, kde 0.2 je příklad hodnoty hranice alpha kanálu. Další užitečnou vlastností je shape-margin, která nastavuje okraje od obtékaného tvaru.

Shape-outside je rozumně funkční zhruba od roku 2018:

Podpora vlastnosti shape-outside
Prohlížeč Podpora ve verzích
Internet Explorer ne
Firefox všechny verze
Chrome, Safari a podobné webkity všechny rozumné verze

Ještě připomínám, že shape-outside samo o sobě neudělá obtékání. Vždy se ještě musí nastavit float right nebo left.

Příklady

Klasicky se obtékání používá například na umístění obrázku vedle odstavce textu. Obrázek se přitom v kódu musí uvést dříve, aby byl ve stejné výšce jako text:

<p>
<img src="nejaky_obrazek.gif" style="width: 100px; height: 100px; float: right">
Text, který bude nalevo vedle obrázku, další text atd.
</p>

Pokud by se takových obrázků za sebou umístilo víc blízko za sebou, může dojít ke kolizi obtékání. Příklad kolize obtékání. To se řeší vlastností clear.

Poslední dobou se obtékání používá pro globální rozložení prvků stránky namísto tabulek. Přitom se vedle sebe dávají dva oddíly (nejčastěji tagy <div>), které mají nastavenu šířku a obtékání (float left nebo right). Zjednodušený zápis:

<style>
#menu {width: 20%; float: left}
#hlavni {width: 78%; float: right}
</style>
...
<div id="menu">levé menu</div>
<div id="hlavni">hlavní obsah ...</div>

Další příklady

Neklikací odkaz v IE 6 strict (float + záporný margin)

Obtékání v HTML a CSS - příklady

Příklad obtékání dvou sloupců

Příklad přesného umístění obtékaného prvku

Bug float + margin-left pro Internet Explorer Jde vlastně o problém dvojitého marginu řešitelný nastavením display: inline pro plovoucí prvek.

Peekaboo bug, příklad od Jana Biena

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.