Float
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
- obtékané prvky
- plovoucí prvky
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ů.
| 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:
| 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 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
