Az úsztatott (float) elemek használatának előnye:
- Népszerű és gyakran használt megoldás.
- Az úsztatott blokkokat követő szöveggel kitölthető a fennmaradó terület.
- A jobbra és balra történő úsztatás kombinálásával összetett szerkezetek hozhatók létre.
Az úsztatott (float) elemek használatának hátránya:
- Nem használhatók vertical-align és a text-align tulajdonságok. Igazítás csak a blokk méretének illetve margóinak méretének állításával lehetséges.
- Az egy sorban egymást követő blokkoknak mindig felső éle esik egybe.
- Ha a blokkok magassága különböző, akkor a magasabb elem megakaszthatja az alatta lévő sorban található blokkok megjelenítését. Ekkor nem a sor elején kezdődik a blokkok megjelenítése, hanem a legmagasabb elem után.
1. Példa:
Forráskód
...
<style type="text/css">
...
/* Az információ blokkok beállítása */
#tartalom .InfoBlokk {
display:block; float:left;
width:80px;
background-color:#033;color:#fff;
margin:2px; padding:5px;
vertical-align:top;
}
</style> ....
<body>
<div id="tarolo">
<input type='checkbox' name='chmenu' id='chmenu' value='chmenu' >
<header id="fejlec"> Webáruház neve és lógója </header>
<nav id="menu">
<label for='chmenu' id='MenuLabel' >Menü</label>
Termékek | Vásárlás | Kapcsolatok
</nav>
<div id="balmenu">
<br>
<b>Kínálat</b>
<ul>
<li>PC</li>
<li>Laptop</li>
<li>Táblagép</li>
</ul>
</div>
<div id="tartalom">
<p>Az oldal tartalma ... </p>
<div class="InfoBlokk"> szöveg ... </div>
<div class="InfoBlokk"> szöveg ... </div>
<div class="InfoBlokk"> szöveg ... </div>
<div class="InfoBlokk"> szöveg ... </div>
Az oldal további tartalma ... szöveg ...<
<p> szöveg szöveg szöveg szöveg szöveg szöveg... </p>
</div>
<footer id="lablec"> Céginfó, jogi információk</footer>
</div>
</body>
Eredmény*
Eredmény*
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: float_webaruhaz.html