První blok.
Druhý blok.
Před tímto odstavcem jsou ve zdrojovém kódu umístěny dva obtékané bloky, umístěné k pravému okraji. První je kratší, druhý delší. Jelikož jsou oba úzké, druhý se vejde na zúžený řádek, jež zanechal první. Proto jsou v konečném důsledku oba bloky umístěny vedle sebe.
Obtékání se pochopitelně řídí tou hranou, která na daném řádku nejvíce zasahuje do prostoru stránky. V tomto případě to znamená, že text obtéká kolem druhého bloku, v jehož spodní polovině díky tomu napravo vzniká prázdné místo. Přestože to může působit podivně, taková jsou pravidla pro obtékání prvků a nedá se s tím nic dělat. Mějte proto na paměti, že pokud se výšky obtékaných prvků významněji liší, může výsledek působit zvláštně.
Třetí blok.
Čtvrtý blok.
Zde je situace opačná – třetí blok je vyšší než čtvrtý, takže levý okraj obtékajícího textu vytvoří schody kolem dvojice prvků.
Obecně se dá říci, že příliš mnoho obtékaných prvků často působí na stránce poněkud podivně a člověk by to s obtékáním neměl přehánět, zejména pokud mají jednotlivé obtékané prvky odlišné rozměry. Jistě si dokážete představit, že kdyby tento text popisoval vlastnosti určitého výrobku a obtékané bloky napravo byly ilustračními fotografiemi tohoto výrobku, vypadala by stránka poněkud zvláštně. V takovém případě je zpravidla výhodnější fotografie rozprostřít na obě strany a umístit je ve zdrojovém kódu od sebe, aby každá začínala v jiné výšce a pokud možno se nekumulovalo několik snímků obtékaných z téže strany zároveň.
Závěrečná část ilustruje, jak se v praxi uplatní pravidla pro obtékání, prokud je kombinace obtékaných objektů hodně divoká. Zkuste měnit šířku okna vašeho prohlížeče a pozorujte, jak se mění rozložení bloků na stránce.
První blok.
Druhý blok.
Třetí blok.
Čtvrtý blok.
Pátý blok.
Šestý blok.
Sedmý blok.
Osmý blok.
zpět: CSS – obtékání