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 Poznámka
Internet Explorer 4, 5, 5.5, 6 v jednotlivých verzích se vyskytují různé chyby implementace (peekaboo, dvojitý margin a 3px bug)
Firefox všechny verze  
Opera 5, 6, 7 verze 4 s chybami
Chrome ano  

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".

Pro IE 4 je styl float nutno aplikovat na prvky div, img nebo object

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>

Zatím nestíhám

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, webhosting s doménou v ceně. 20GB
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.