Pozicionálás - Úsztatás (float) tulajdonság

Weblap készítése során mindennapos igény beilleszteni egy képet úgy, hogy a szöveg a kép mellett folytatódjon. Erre szolgál a float tulajdonság, ami a képet az egyik irányba elúsztatja és a szöveg a képet körbefolyhatja. (A float kifejezést lebegésnek is szokták magyarra fordítani.)

Példa:

<img src="rose.jpg" width="230" height="189"
   style="float: right" alt="Rózsa" title="Rózsa">

Az eredmény jobb oldalt látszik. Az úsztatott elem szélességét kötelező megadni. (Különben a böngésző nem tudná, hogy a rendelkezésre álló helyen belül milyen széles lehet az úsztatott elem és mekkora tér jut a szövegnek.)

A float tulajdonság lehetséges értékei:

• left (balra)
• right (jobbra)
• none (Az elem nincs úsztatva és nem lehet mellette szöveg.)
• inherit: érték a szülő elemtől örökölve.

Automatikus öröklődés: Nincs. A tulajdonság alapértelmezett értéke: none.

A float tulajdonság alapfunkciója a képek vagy táblázatok oldalra úsztatása, de bármilyen más elemre is alkalmazható. Így például <div> tagok segítségével lehetséges a weblapok elrendezésének definiálása is, de ha ilyen megoldást választasz, akkor különösen gondosan teszteld az oldalaidat. Az úsztatás természetéből adódóan nagyon eltérő eredményeket kaphatsz a különböző szélességű monitorokon.

Tipp: Ha oldalra akarsz igazítani egy képet vagy táblázatot, de nem akarod, hogy a szöveg mellette folytatódjon, akkor is használhatod a float tulajdonságot. A clear tulajdonságot kell beállítanod arra a bekezdésre, amelyiket már nem akarod az úsztatott elem mellett megjeleníteni.

Példa:

<img src="rose.jpg" width="230" height="189"
   style="float: right" alt="Rózsa" title="Rózsa">

<p style="clear: right">Ez a szöveg már
   nem folyik a kép mellé.</p>

Ami így jelenik meg:

Ez a szöveg már nem folyik a kép mellé.

Eltávolítás (clear) tulajdonság »