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