Obtékání prvků

Další mimořádností, kterou lze zanést do uspořádání prvků na stránce, je obtékání. Spočívá v tom, že obtékaný prvek je přesunut k okraji bloku a ostatní pak obtékají kolem něj. Příklad vidíte přímo na této stránce – napravo je umístěn obrázek, zleva obtékaný textem.

Vlastnost float

O obtékání rozhoduje vlastnost float. Má tři základní hodnoty: left (objekt se přesune k levému okraji a je obtékán zprava), rigth (objekt se přesune k pravému okraji a je obtékán zleva) a none (objekt není obtékán, zůstane v běžném toku). Výchozí hodnotou je pochopitelně none – chcete-li, aby byl určitý prvek obtékán, musíte ji změnit.

Pokud se rozhodnete obtékání používat, pak je pravděpodobně budete používat celkem často. V takovém případě je dobré připravit si pro ně třídy a obtékání zajistit prostým přiřazením prvku jedné ze tříd. Já mám definovány dvě – floatrigth a floatleft:

.floatright {
    float: right;
    margin: 5px 0 5px 10px;
}
.floatleft {
    float: left;
    margin: 5px 10px 5px 0;
}

Obrázek na této stránce je obtékán díky zařazení do třídy floatright:

<img src="prehrada.jpg" alt="[ilustrační obrázek]"
     width="224" height="300" class="floatright" />

Na co dát pozor

Pozor, k pravému okraji řádku (bavíme-li se o obtékání zarovnaném doprava) je umístěna hrana pravého okraje obtékaného bloku. To znamená, že pokud má obtékaný blok nenulový pravý okraj, jeho viditelná část „odskočí“ od pravého okraje doleva. Například stejný obrázek jako výše, ale s okrajem velikosti 1em na všech stranách, by vypadal tak, jak vidíte u následujícího odstavce.

Obecné doporučení proto zní, abyste obtékaným prvkům nastavovali jejich vnější okraj (ten, k němuž jsou zarovnány) vždy nulový. Jinak výsledek zpravidla vypadá nedobře. (Nenulový okraj se lépe snese napravo, kde díky rozdělování slov na řádcích zpravidla vzniká přirozené prázdné místo a posunutí obrázku proto netluče tolik do očí.)

Když už jsme u okrajů, okraje obtékaných prvků se neprolínají s okraji okolních prvků.

Obtékaný prvek je vyjmut z prvku, který jej obsahuje a ten díky tomu může skončit dříve. Nejlépe to ilustruje příklad.

Obtékaný prvek musí mít definovánu šířku. Pokud se jedná o tak zvaný nahrazovaný prvek (čili prvek sloužící jen jako kontejner pro nějaký obsah, jenž bude na jeho místo vložen, jako třeba obrázek), stanoví si šířku klient podle přirozené šířky objektu vloženého na místo prvku (obrázku). V opačném případě je třeba šířku stanovit vlastností width.

Vícenásobné obtékání

K zajímavé situaci dojde, pokud se sejde více obtékaných prvků najednou. V zásadě platí, že obtékaný prvek zúží řádek a v rámci daného prostoru pak obtékají další. Pokud je zbývající prostor pro ně příliš malý, posunou se dolů, pod předchozí obtékané prvky. Při jejich umisťování platí tyto zásady:

• Obtékaný prvek musí být umístěn co nejvýše – čili jakmile je pro něj na řádku dostatek místa, bude tam umístěn.
• Nepředbíhá se. Horní hrana obtékaného bloku (přesně řečeno vnější hrana jeho horního okraje) nesmí být výše než horní hrana jiného obtékaného prvku, který je ve zdrojovém kódu dříve, ani než horní hrana jeho obsahujícího bloku.

Obtékané prvky se postupně skládají do dostupného prostoru. Pokud například všechny umístít k pravému okraji, bude první z nich zcela napravo, další pak napravo ve zbývající částo řádku (čili nalevo od předchozího) atd. – podívejte se na příklad.

Zákaz obtékání

Někdy je nežádoucí, aby určitý prvek obtékal kolem jiných. Například můžete považovat za nevhodné, aby nadpis další části stránky obtékal kolem obrázků, jež náleží části předchozí.

V tom případě vám poslouží vlastnost clear. Její hodnota říká, kolem kterých prvků tento nesmí obtékat. Má-li hodnotu right, nesmí být prvek umístěn vedle obtékaného materiálu zarovnaného napravo. Hodnota left zakazuje umístění vedle obtékaného prvku zarovnaného doleva. Prvek, jehož vlastnost clear má hodnotu both pak nesmí obtékat žádné jiné prvky. V praxi to znamená, že dotyčný prvek bude umístěn až pod všemi, jež má zakázáno obtékat.

Například kdybych chtěl nadpisům kategorie <h2> zakázat obtékat kolem čehokoli, použil bych definici

h2 { clear: both; }

K čemu je to dobré

Některé situace vhodné pro nasazení obtékání jsou nabíledni. Například ilustrační obrázky na stránce, obtékané textem – asi jako obrázky na této stránce. Existují však i rafinovanější způsoby využití.

Obtékání lze třeba použít k vytvoření vícesloupcového uspořádání stránky. Řekněme, že chcete klasickou kompozici – menu nalevo a vpravo vedle něj hlavní text. Příklad vám předvede, jak toto uspořádání realizovat pomocí obtékání.