CSS3 - Float

Plutajući (eng. Float) elementi sa CSS-om

Elemente možete postaviti lijevo ili desno, ali odnosi se samo na elemente koji generišu okvire koji nisu apsolutno pozicionirani. Bilo koji element koji slijedi prikazivaće se oko float elementa s druge strane. Svojstvo float može imati jednu od tri vrijednosti:

Vrijednost Opis
left Element lebdi na lijevoj strani bloka.
right Element lebdi na desnoj strani bloka.
none Uklanja svojstvo float iz elementa.

Kako elementi lebde (float)

Plutajući element izvodi se iz normalnog toka i pomiče lijevo ili desno što je više moguće u raspoloživom prostoru elementa koji sadrži. Ostali elementi obično se kreću oko plutajućih elementa, osim ako ih ne sprječava njihovo čisto svojstvo. Elementi lebde vodoravno, što znači da element može plutati samo lijevo ili desno, a ne gore ili dolje. 

img {
    float: left;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer Floating elementa</title>
<style>
    img {
        float: left;
        width: 150px;
        height: 150px;
        margin-right: 20px;
    }
</style>
</head>
<body>
  <p><img src="img/kites.jpg" alt="Flying Kites"> Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor,
    varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis
    vel, semper malesuada ante. Vestibulum id metus ac nisl 
    bibendum scelerisque non non purus. Suspendisse varius nibh non 
    aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
    Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
    in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget 
    risus. Integer aliquet quam ut elit suscipit, id interdum neque 
    porttitor. Integer faucibus ligula.</p>
</body>
</html>

Ako je nekoliko plutajućih elemenata postavljeno susjedno, plutaće jedan pored drugog ako postoji vodoravni prostor. Ako nema dovoljno mjesta on se pomiče prema dole dok se ne uklopi. 

.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer Floating više elemenata</title>
<style>
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .thumbnail {
        float: left;
        width: 125px;
        height: 125px;
        margin: 10px;
    }
</style>
</head>
<body>
  <ul>
        <li class="thumbnail"><img src="img/club.jpg" alt="Club Card"></li>
        <li class="thumbnail"><img src="img/diamond.jpg" alt="Diamond Card"></li>
        <li class="thumbnail"><img src="img/spade.jpg" alt="Spade Card"></li>
        <li class="thumbnail"><img src="img/heart.jpg" alt="Heart Card"></li>
    </ul>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Isključivanje Float-a koristeći Clear Property

Elementi koji dolaze nakon plutajućeg elementa biće postavljeni oko njega. Svojstvo clear specifikuje na kojim stranama okvira plutajući elementa nisu dopušteni. 

.clear {
    clear: left;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer isključivanja svojstva floats</title>
<style>
  .clear {
    clear: left;
  }
  p {
    float: left;
    margin: 10px; 
    padding: 10px;
    background: #f0e68c;
  }
</style>
</head>
<body>
  <p>Float lijevo.</p>
    <p class="clear">Na lijevoj strani nisu dopušteni plutajući elementi.</p>
</body>
</html>