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.