Vlastnost Float
(Ukázka z knihy CSS Kaskádové styly pro webdesignéry)
Vlastnost určuje, zdali má box plavat vlevo, vpravo, nebo vůbec neplavat. Může být nastavena jen pro prvky, které negenerují absolutně polohované boxy. Další podrobnosti naleznete v části Polohování.
Rychlý přehled vlastnosti
| Možné hodnoty: | left | right | none | inherit |
| Výchozí hodnota: | none |
| Ovlivňuje: | všechny prvky s výjimkou polohovaných a generovaného obsahu |
| Dědičná: | ne |
| Procenta: | - |
| Média: | vizuální |
| Kompatibilita: |
|
Význam hodnot
- left
- prvek generuje vlevo plovoucí box. Obsah obtéká zprava počínaje vrškem boxu. Vlastnost
displayje ignorována, pokud nemá hodnotunone. - right
- prvek generuje vpravo plovoucí box. Obsah obtéká zleva počínaje vrškem boxu. Vlastnost
displayje ignorována, pokud nemá hodnotunone. - none
- box neplave a obsah ho neobtéká
- inherit
- hodnota se zdědí po rodičovském prvku
Ukázka použití
Řekněme, že chcete do textu vložit obrázky tak, aby je text zleva či zprava obtékal, zároveň se však chcete vyhnout zavrženému (deprecated) atributu align značky <img>. Výchozí HTML kód vypadá takto:
<div class="box">
<img class="vpravo" src="obr1.jpg" alt="vzor" width="60" height="60" border="0">
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img class="vlevo" src="obr1.jpg" alt="vzor " width="60" height="60" border="0">
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Když nyní na tento kód aplikujeme následující stylový předpis:
.box {
margin: 1em;
padding: 1em;
border: 1px solid #000;
width: 20em;
background: #eee;
}
img.vpravo {
float: right;
margin: 0.2em 0 0.2em 0.2em;
}
img.vlevo {
float: left;
margin: 0.2em 0.5em 0.2em 0;
}
dostaneme tento výsledek:
Na dalším příkladu si ukážeme, jak opticky rozdělit box na dva sloupce bez použití tabulky. HTML kód vypadá takto:
<div class="box2">
<div class="levy">
<h3>1. sloupec</h3>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="pravy">
<h3>2. sloupec</h3>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
a když na něj aplikujeme tento stylový předpis:
.box2 {
margin: 1em;
border: 1px solid #000;
width: 22em;
}
div.levy {
float: left;
padding: 1em 4%;
width: 42%;
background: #eee;
}
div.pravy {
float: right;
padding: 1em 4%;
width: 42%;
background: #ddd;
}
Bude výsledek vypadat jako na následujícím obrázku:
Ve skutečnosti ovšem není vícesloupcové rozvržení boxů nebo celých dokumentů tak jednoduché, neboť je třeba se vyrovnat s implementačními chybami prohlížečů a častečni i s omezenými možnostmi CSS2. Ve výše uvedeném příkladu by bylo třeba kompenzovat chybu IE ve výpočtu šířky boxu (projevuje se až do verze 5.5) a navíc by byl problém takto jednoduše docílit opticky stejné výšky obou sloupců v případě, že by jejich obsah nebyl stejně vysoký.
Další příklady naleznete u popisu vlastnosti clear a v části věnované Polohování.
Praktické využití
Vlastnost float má široké možnosti uplatnění např. pro obtékání obrázků nebo textových boxů, při tvorbě vícesloupcového rozvržení dokumentů nebo jejich částí, apod. Spolu s absolutním polohováním se jedná o nejrozšířenější techniku řízení rozvržení (layoutu) stránek podle moderní koncepce webdesignu, která pro layout nepoužívá tabulky.
Toto je ukázka z knihy Marka Prokopa CSS Kaskádové styly pro webdesignéry, kterou vydalo nakladatelství Mobil Media a.s. v roce 2003. Knihu si od nás můžete objednat za 280 Kč.
