Úsztatás (float) tulajdonság

A float ( úsztatás ) tulajdonság lehetővé teszi, hogy egy elemet az azt tartalmazó tárolóelem (szülő elem) jobb vagy bal széléhez igazítsunk ( úsztassunk ). Az úsztatott elem mellé további úsztatott elemek kerülhetnek és a szöveges tartalom is szabadon körülfolyhatja.

A float tulajdonság lehetséges értékei:
left = Az elem balra úszik a további tartalom jobb oldalára kerül.
right = Az elem jobbra úszik a további tartalom bal oldalára kerül.
none = Az elem nincs úsztatva és nem lehet mellette szöveg.
inherit = Az érték a szülő elemtől örökölődik.
(alapértelmezett értéke: none)

Az float tulajdonságot használhatjuk képek, táblázatok, tároló elemek oldalra úsztatására, az oldal szerkezetének kialakítására.

A háttérkép ismétlődése módjának megadása:

kijelölő

{

float

kulcsszó;

}

1. Példa:

Forráskód


<body>    
     Egy kép alapértelmezetten úgy jelenik meg
     <img src="mosoly_k_1.jpg" alt="akkumulátor" /> 
     mintha egy nagy betű lenne.   
</body>

Eredmény*

2. Példa:

Forráskód


<style> 
    .balra {float:left;  width: 40px; height: 40px;}  
</style	> 
….
<body>    
     A balra úsztatott képet jobbról veszi körbe
     <img src="mosoly_k_1.jpg" alt="akkumulátor" /> 
     a szöveg. A margók beállításával növelhetjük 
     a szöveg és kép távolságát.   
</body>

Eredmény*

3. Példa:

Forráskód


<style> 
    .jobbra {float:right; width: 40px; height: 40px;}  
</style	> 
….
<body>    
     A jobbra úsztatott képet balról veszi körbe
     <img src="mosoly_k_1.jpg" alt="akkumulátor" /> 
     a szöveg. A margók beállításával növelhetjük 
     a szöveg és kép távolságát.   
</body>

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ő: css_usztatas_2.html