CSS float használata (CSS úsztatás, lebegés)
A CSS float-ot magyarul úsztatásnak és lebegésnek is lehet fordítani, de egyik elnevezést sem szoktuk használni szakmaibb körökben, ezért maradjunk inkább a float-nál.
A CSS float tulajdonsága azt határozza meg, hogy egy HTML elemnek hogyan kell úsznia, lebegnie. Ezt megfogalmazhatjuk sokkal érthetőbben is: a CSS float tulajdonképpen segít egy képnek megmondani, hogy hol is kellene elhelyezkednie.
Például biztosan mindenki tapasztalta már, hogy ha készít egy weboldalt, amelyen szöveg és kép is található, akkor a tartalmak egymás után következnek. Ilyenkor jelentkezhet az a valós igény, hogy jó lenne, ha a szöveg között vagy mellett jelenhetne meg a kép.
Pont ezt valósítja meg a CSS float, hiszen a képet „elúsztatja” a tárolóelem, vagyis szülőelem egyik irányába, míg a szöveg körbefolyik körülötte. (Természetesen nem csak képek úsztathatóak, hanem táblázatok, div-ek és egyéb HTML elemek is.)
CSS float szintaktika
KIJELÖLŐ {
float: ÉRTÉK;
}
Code language: CSS (css)Egy HTML elemre kell „rátennünk” a float tulajdonságot, mely az alábbi értékeket veheti fel:
- left (az elem balra úszik, így a tartalom jobb oldalra kerül)
- right (az elem jobbra úszik, így a tartalom balra kerül)
- none (az elem nem úszik semerre, ez az alapértelmezett beállítás)
- inherit (az úszás irányát a szülőelemtől örökli)
Példa úsztatás nélkül
Elsőnek nézzük meg, hogy hogy néz ki az eredmény, ha nem használunk egyáltalán úsztatást.
CSS kód
img {
float: none;
}
Code language: CSS (css)Eredmény
Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik.
Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Felülre azt írtam, hogy float: none;, ami egyenértékű azzal mintha semmit sem írtam volna CSS formázásként. Láthatjuk, hogy a szöveg eléggé furcsa módon veszi körül a képet, ezért szükséges a float tulajdonság használata.
Példa balra úsztatásra
CSS kód
img {
float: left;
}
Code language: CSS (css)Eredmény
Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik.Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Láthatjuk, hogy itt már sokkal szebben futja körbe a képet a szöveg. Természetesen egy kis CSS csinosítgatás még nem árt neki a teljes gyönyör érdekében. Egy margó beállítás már nagyot dobna az összképen. De ezt most nem tárgyaljuk itt, mert nem erről szól a cikk, de akit érdekel a téma, az itt olvashat róla bővebben.
Példa jobbra úsztatásra
CSS kód
img {
float: right;
}
Code language: CSS (css)Eredmény
Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik.Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik. Itt van egy kis szöveg nézzük meg, hogy mi történik.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A kép gond nélkül átkerült a másik oldalra. Hasznos kis trükkök ezek, gyakran használjuk őket, például egy weboldal kinézetének kialakításakor, hiszen nem csak képekre alkalmazhatjuk ezeket a lebegtetéseket, hanem div-ekre is, szóval mindenképp érdemes észben tartani a CSS float utasítását.
