A valid css leírása
A float tulajdonság segítségével az adott elemeket igazíthatjuk az utánnuk következő elemhez képest. Értékei a "left, right, none", balra, jobbra vagy semerre.
Az igazítás során az igazítandó elem típusa megváltozik "inline-block" elemmé, ezáltal felvéve azt a méretet amekkora a benne levő tartalom mérete, amennyiben ezt nem változtatjuk meg.
Ilyen igazításokat használunk olyan esetekben amikor egy képet szeretnénk körbeírni, vagy elemeket szeretnénk egymás mellé tenni, pl. a felső menű elemeit, az alsó hozzászólás form különböző elemeit, stb.
Ha egy képet szeretnénk egy szövegen belül igazítani, hogy a szöveg a képet körbeérje, ahoyg újságokban is látható:
akkor a képet kell igazítanunk jobbra vagy balra, pl:
<div>
<img src="Kép elérési útvonala" alt="Kép" />
Lorem ipsum dolor sit amet lorem ipsum dolor sit
amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
</div>
Amennyiben, ha azt szeretnénk, hogy a kép a szöveg oldalára kerüljön, viszont a szöveg ne kerítse be körbe, akkor a szöveget bele kell tennünk egy külön blokk elembe (pl div), melyet igazítunk jobbra vagy balra. A végcél eléréséhez még a szöveget tartalmazó elem szélességét is be kell állítani, hogy elférjen a kép mellett, de a magasságról sem feledkezhetünk meg, mível ha a kép magassága kisebb mint a szövegé, akkor a szöveg befolyik a kép alá, ezáltal körbeírva azt.
<div>
<p class="image_container">
<img src="Kép elérési útvonala" alt="Kép" />
</p>
<p class="text_container">
Lorem ipsum dolor sit amet lorem ipsum dolor sit
amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
</p>
</div>
<style type="text/css">
p.image_container
{
width: 50px;
height: 100px;
float: left;
}
p.text_container
{
width: 200px;
float: left;
}
</style>
Ha egy elemen használjuk a float tulajdonságot, és azt szeretnénk, hogy az utánna következő elem mindenképp új sorban kezdődjön, akkor a két elem közé kell tennünk egy "clear: both;"-al rendelkező elemet, vagy az új sorba kerülendő elemnek kell beállítanunk a "clear: both;" tulajdonságot.
Bár a float érték csak a következő elemre van hatással, de a használata után mindenképp ajánlatos tenni egy elemet, mely rendelkezik a clear: both; tulajdonsággal, hogy a következő elemek tiszta lappal induljanak, ezáltal rengeteg idegességet meg lehet spórolni a későbbiekben.
