Kako funkcionišu plutajući elementi (floats) u CSS?

float uklanja element iz normalnog toka dokumenta, omogućavajući drugim elementima (obično tekstualnim ili inline) da ga obuhvate sa strane navedene u svojstvu (left, right).

Osnovni principi:

• Uklanjanje iz toka: Element sa float ne zauzima mesto u normalnom toku dokumenta.
• Obuhvatanje: Susedni blok elementi neće zauzimati mesto elementa sa float, a njihov sadržaj (inline elementi) će ga obuhvatiti sa strane navedene svojstvom.
• Uticaj na roditelja: Visina roditeljskog kontejnera koji sadrži samo float elemente može se smanjiti, ignorišući njihovu visinu.
• clear: Svojstvo clear (left, right, both) se koristi za sprečavanje obuhvatanja od strane elemenata koji su posle float elementa.

Primer:

.image {
  float: left; /* Slika se pomera ulevo */
  margin-right: 10px; /* Dodaj razmak desno za tekst */
}

.text {
  /* Tekst će obuhvatiti sliku */
}

Preporuke:

• Korišćenje float je zastarelo za kreiranje složenih rasporeda i zamenjeno je Flexbox-om ili Grid-om.
• float i dalje može biti koristan za pravljenje efekta obuhvatanja slika tekstom.
• Da bi se sprečilo urušavanje roditeljskog kontejnera pri korišćenju float, primenjuju se tehnike poput "clearfix" ili overflow: hidden/auto na roditelju.