Šta su float elementi u CSS-u?

Plutajući elementi (float) u CSS-u su svojstvo koje omogućava pomeranje elementa iz normalnog toka dokumenta i njegovo postavljanje sa leve ili desne strane njegovog kontejnera. Susedni elementi i tekst će obuhvatiti ovaj plutajući element.

Glavne vrednosti svojstva float:

• left: Element pluta ulevo.
• right: Element pluta udesno.
• none: Element ostaje u normalnom toku (podrazumevana vrednost).
• inherit: Nasleđuje vrednost od roditelja.

Primeri upotrebe:

.float-left {
  float: left; /* Element će plutati ulevo */
  margin-right: 10px; /* Dodajemo razmak desno od teksta */
}

.float-right {
  float: right; /* Element će plutati udesno */
  margin-left: 10px; /* Dodajemo razmak levo od teksta */
}

Karakteristike ponašanja:

• Plutajući element se uklanja iz standardnog toka dokumenta, ali utiče na raspored susednih elemenata i teksta.
• Roditelj plutajućeg elementa može "da se sruši", jer plutajući deca ne utiču na njegovu visinu u normalnom toku. Da bi se to sprečilo, koriste se tehnike poput clear ili druge, na primer overflow: hidden ili Flexbox/Grid.
• Svojstvo clear omogućava da se odredi sa koje strane ne smeju biti plutajući elementi:

  .clear-left {
    clear: left; /* Element će biti postavljen ispod svakog plutajućeg elementa sa leve strane */
  }
  
  .clear-right {
    clear: right; /* Element će biti postavljen ispod svakog plutajućeg elementa sa desne strane */
  }
  
  .clear-both {
    clear: both; /* Element će biti postavljen ispod svih plutajućih elemenata sa obe strane */
  }
  

Istorijski, plutajući elementi su korišćeni za pravljenje višekolumnskih rasporeda, ali je sada za tu svrhu preporučljivije koristiti Flexbox ili CSS Grid zbog njihove veće fleksibilnosti i predvidivosti. Ipak, float je i dalje koristan za obmotavanje teksta oko slika ili drugih elemenata.