FLOAT – css vlastnost pro obtékání

Poměrně užitečná vlastnost, která mění umístění elementu, a to tak, že dovolí jinému HTML kódu obtékat jej po druhé straně. FLOAT je poměrně často užívaná vlastnost. 

Funguje prakticky ve všech dnes používaných prohlížečích | není sice dědičná, ale ovlivňuje prvky pod ní

Způsob zápisu

Ukázka zápisu obtékání obrázku (<img>) tak, aby se obrázek držel při pravém okraji a text byl vlevo od něj:

img {
   float: right;
}

Vysvětlení způsobu zápisu

Můžete nastavit FLOAT: LEFT (element bude vlevo a obtékán zprava), nebo FLOAT: RIGHT (element se přichytí pravého okraje a obtékán bude zleva). 

Příklady použití FLOAT

Pro obtékání obrázků

Když potřebujete obrázek zobrazit při pravém, nebo levém okraji, a přitom ve volném prostoru na opačné straně zobrazit text

Pro obsah ve sloupcích

Chcete-li vytvořit dva a více sloupců, můžete to sice udělat za pomoci tabulky (což je možná snazší, ale narůstá tím velikost HTML kódu), ale elegantnější to bude za pomoci obtékání v CSS, protože oddělíte vzhled od obsahu. V případě dvou sloupečků o stejné šířce může být obtékán jeden vlevo a druhý vpravo, viz ukázka: 

...
<style>
   .pravy{ 
        float: left;
        width: 50%;
   }
   .levy{
        float: right;
        width: 50%;
   }
</style>
...
<div class="levy"> ... </div>
<div class="pravy"> ... </div>

Pro menu tvořené pomocí seznamu

Dělat menu pomocí seznamu je vcelku logické, jelikož se fakticky jedná o seznam. Standardně se však položky seznamu vypisují pod sebe. V případě vodorovného menu je to ale nežádoucí chování, proto necháme jednoduše položky seznamu obtékat:

...
<style>
   .menu li{ 
        float: left;
   }
</style>
...
<ul class="menu">
    <li><a href="/">Titulní stránky</a>
    <li><a href="/onas.html">O nás</a>
    ...
</ul>

Vliv FLOAT na ostatní elementy

Element (<div>, <img>...) s vlastností FLOAT bude mít sice své rozměry, ale již nebude zařazen do běžného toku dokumentu. Tato skutečnost může mít větší důsledky, než se na první pohled začátečníkovi zdát.

Možný problém s FLOAT

Představte si, že máte DIV, který má pozadí a uvnitř tohoto DIVu vytvoříte dva sloupce. Zjistíte jednu nepříjemnou skutečnost, a to fakt, že se pozadí rodičovského DIVu nezobrazí. Prohlížeč totiž neví, kam až tyto dva DIVy sahají, protože jsou vyjmuty z běžného toku dokumentu.

Řešení problému

K řešení tohoto problému je vytvořena vlastnost pro rušení obtékání a sice CLEAR. Pokud ji použijete za obtékanými elementy, pak prohlížeč bude moci dopočítat délku, respektive dosáhnete vyplnění pozadí v našem příkladu. Podívejte se na řešení:

...
<style>
   .pravy{ 
        float: left;
        width: 50%;
   }
   .levy{
        float: right;
        width: 50%;
   }
   .zruseni-obtekani{
        clear: both;
   }
</style>
...
<div id="telo">
   <div class="levy"> ... </div>
   <div class="pravy"> ... </div>
   <div class="zruseni-obtekani"></div>
</div> <!-- Ukončení DIVu "telo" -->

Kam dál

Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla