Skrytá zákoutí CSS - plovoucí prvky
Aktualizováno 28.7.2006
Jedna z nejsložitějších technik v CSS 2.0 je technika tečení. Přestože je vlastnost float celkem dobře známá, jen málokdo ví, jak přesně funguje. Z prvku, kterému nastavíme vlastnost float se stává "plaváček". Prvek se odsune k vnitřnímu okraji rodičovského prvku a zbytek textu ho (pokud může) obtéká.
Průběh je ale mnohem složitější než se zdá. Podívejme se tedy na něj detailně:
- Plaváček se nejprve vyjme z okolního obsahu a odsune se k okraji rodičovského prvku, nebo se zařadí vedle jiného plaváčka.
- Okolní blokový obsah se poté formátuje jako by tam žádný plaváček nikdy nebyl (až na IE včetně IE6).
- Jediné na co bude mít plaváček vliv, je řádkový obsah. Ten se plaváčku vyhýbá.
Řádkový a blokový obsah se v tomto případě formátují zcela nezávisle, a proto se muže stát, že text uvnitř divu se ocitne vně divu.(jak si ukážeme na příkladu)
Následující příklad jasně ukazuje o co se jedná. Máme zde dva divy, první je plaváček a má modrá rámeček. Druhý je normální div a má červený rámeček. Oba mají stejnou velikost 100x100px.
Zdrojový kód: CSS
.jedna{
width:100px;
height:100px;
border:1px solid #00f;
float:left;
color:#f00;
}
.dva{
width:100px;
height:100px;
border:1px solid #f00;
color:#f00;
}
HTML
<div class="jedna">první</div> <div class="dva">druhý</div>
Pokud máte jiný porhlížeč než IE, tak se možná divíte, co že to vlastně vidíte. Vidíte-li pouze modrý rámeček s textem "první" a pod ním pouze text "druhý", chová se váš browser zcela korektně. Co se vlastně stalo?
- Plaváček(První) se odsunul doleva.
- Druhý se formátoval jakoby tam žádný plaváček nebyl. Je tedy také vlevo a není vidět protože je pod plaváčkem.
- Řádkový obsah Druhého se plaváčkovy vyhýbá a zformátoval se pod ním. Text Druhého se tedy dostal vně.
- První plaváček se vyjme z obsahu a odsune se k levému okraji rodičovského prvku.
- Následující prvek s přiřazenou vlastností float se pokusí žařadit vpravo vedle prvního plaváčka. Pokud je tam ale nedostatek místa, zařadí se až pod něj.
- Pokud následují další plaváčci, chovají se stejně.
Vztahy s následujícími prvky
Pokud po plaváčkovy následuje text, inline prvek nebo blokový prvek bez udané šířky, zařadí se tento vpravo vedle plaváčka(pokud je vedle něj dostatek místa). Blokový prvek bez udané šířky se formátuje, jakoby tam plaváček nebyl, tudíž se zformátuje od okraje k okraji rodičovského prvku. Pouze text uvnitř blokového prvku se plaváčkům vyhýbá a proto se posune až k pravému okraji plaváčka. Pokud má blokový prvek (div, p, atd.) udánu šířku, formátuje se opět jakoby tam plaváček nebyl, takže se vlastně podsune pod plaváčka. V případě, že je blokový prvek širší než plaváček, pokusí se text uvnitř blokového prvku zformátovat vpravo vedle plaváčka (tedy uvnitř blokového prvku). Pokud zde ale není dostatek místa pro jednotlivá slova, posune se text až pod blokový prvek. Ukázka:
Vztahy s rodičovskými prvky
Musíme mít stále na mysli, že plaváček se během formátování vyjme z obsahu stránky a formátuje se zvlášť. Ovlivňuje pouze řádkový obsah stránky (text). To tedy znemená, že pokud budeme mít rodičovský blokový prvek bez udané výšky a vložíme do něj pouze plaváčky, bude se chovat, jakoby v sobě žádné prvky neměl, tedy se vlastně nezobrazí. My ale většinou potřebujeme, aby se rodičovský prvek zobrazil, zejména kvůli designu. Když za plaváčky přidáme nějáký normální prvek, hrozí nám, že se tento zařadí pouze vedle plaváčků a rodičovský prvek se pak zobrazí jen pod tento prvek, tedy plaváčky uřízne. Ukázka(rodičovký prvek má černý rámeček):
Aby jsme tuhle situaci vyřešili, stačí dát na konec rodičovského prvku, prázdný div s vlastností clear:left;
Ukázka:
Tvorba horizontálního menu
Často se vlastnost float používá k zařazení více prvků vedle sebe (například ze seznamu ul udělat horizontální menu). Plaváčci musejí mít nastavenu vlastnost width. V případě, že nastavíte více sousedícím prvkům vlastnost float:left, chovají se následovně: