MENU

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

  1. 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

  2. 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>
  3. 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

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548