CSS - float

CSS pravidlo float umožňuje „přirazit“ elementy ke kraji stránky a nechat je „obtékat“ zbylým obsahem. Prapůvod má v obtékání obrázků již z dřevních dob HTML, ukážeme si ho proto nejdříve na nich.

Obrázek - základní nastavení

V základním nastavení se obrázek chová tak jak má, jako obyčejný rádkový (inline) element. To znamená, že se zobrazí na tom místě, kde ho ve zdrojovém kódu stránky uvedete (a zarovná svým spodním okrajem na účaří textového řádku, v němž se nachází). Zkuste si změnit velikost okna prohlížeče, abyste viděli, že se obrázek chová „jako kus obyčejného textu“.

Lorem ipsum dolor sit amet consectetuer amet ligula Curabitur rhoncus semper. Tellus leo Aliquam volutpat pellentesque tellus ultrices adipiscing elit cursus eu. Volutpat eget dui tincidunt Curabitur Pellentesque in interdum porttitor Vestibulum nibh. Id Mauris pellentesque ac elit ornare Maecenas eu tincidunt nec gravida. Mus sem Pellentesque orci adipiscing eros ante. Euismod lorem pede tellus nunc Vivamus felis Vivamus Duis In et. Convallis vitae at accumsan condimentum ipsum Duis porttitor Morbi semper ornare. Curabitur Aliquam elit lacinia a feugiat Curabitur eget lobortis lacinia nunc. Pellentesque pretium risus accumsan et justo risus nibh odio elit condimentum. Est id enim pede Suspendisse dui mi pede felis Donec lorem. Ut non consectetuer justo Nulla. pyramida

Libero vitae semper tellus Phasellus congue tristique nulla elit arcu ipsum. Nibh et quis lacus Vestibulum rhoncus consequat quis et facilisis condimentum. Cras Nulla ultrices morbi Curabitur sapien condimentum netus Ut felis iaculis. Non leo augue ac a neque eget semper pellentesque In Maecenas. Phasellus congue consectetuer Maecenas consequat Nulla Pellentesque laoreet est Sed tellus. Convallis at eget id Mauris Sed mus metus vel orci tempor. Mauris dignissim. Donec tortor et elit sit sodales consequat In tempus ut lobortis. Montes ligula In cursus Aenean tincidunt leo Sed urna wisi consequat. Elit eu Nam elit elit diam Aenean elit ut convallis et. Egestas nibh tellus ac faucibus mollis sem dis Pellentesque eget nonummy. Tortor tempor senectus eget Nullam habitasse amet quis molestie elit et. Nunc Nullam consequat feugiat quis sem dui In mollis velit ridiculus. Tincidunt Sed Lorem.

Obrázek - float

Nastavíme-li ale obrázku CSS vlastnost float, stane se něco zajímavého: Obrázek se změní z řádkového elementu na blokový a „přirazí se“ k uvedenému okraji stránky. Zbytek textu ho pak ze zbylých tří stran poslušně „obtéká“. (Jediný zádrhel je, že není vždy úplně jasné, jak konkrétně se obrázek „odstraní“ ze svého původního místa v základním toku elementů ve stránce, takže musíte počítat s posunem o řádek tam či sem.) Zase si zkuste změnit velikost okna prohlížeče, ať vidíte, jak se takto upravený obrázek chová, zvláště v porovnání s předchozím příkladem.

Obecný element - float

Na tomto příkladu je vidět, že to, co provádíme s obrázkem, můžeme za pomoci CSS dělat i s jinými elementy. Zde konkrétně je použit univerzální blokový element DIV, kterému jsme nastavili rozměry, okraj a pozadí (to aby byl dobře k rozpoznání a zabíral nějaké rozumné místo), čímž se vnějším projevem docela podobá obrázku (jehož vykreslení je floatem změněno ze základního řádkového na blokové). Tento vnitřní DIV je následně odsunut k pravému okraji stránky a ostatní text (v nadřazeném DIVu) ho poslušně obtéká. Opět si zkuste změnit velikost okna prohlížeče, ať vidíte, jak se takto upravený DIV chová, a porovnejte s předchozími příklady.

Tohle je pokusný DIV uvnitř DIVu. Jeho rozměry jsou omezeny a je nastaven, aby byl obtékán okolním textem/elementy.

CSS float

Obrázek - základní nastavení

Obrázek - float

Obecný element - float