CSS vlastnost float určuje obtékání prvku.
| 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.
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ů.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6 | v jednotlivých verzích se vyskytují různé chyby implementace | |
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 5, 6, 7 | verze 4 s chybami |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | velmi špatně |
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
Neklikací odkaz v IE 6 strict (float + záporný margin)
Obtékání v HTML a CSS - příklady
Příklad přesného umístění obtékaného prvku
Clear = čekání na skončení obtékání, Width = šířka
Atribut align v HTML u některých tagů je zastaralým způsobem obtékání.
Jak funguje float a clear - Pixy.
Vlastnost float - Marek Prokop, ukázka z knihy Kaskádové styly pro webdesignéry
o tvorbě, údržbě a zlepšování internetových stránek