Kuidas töötavad CSS-is ujuvad elemendid (floats)?

float eemaldab elemendi tavalise dokumendi voost, võimaldades teistel elementidel (tavaliselt tekstil või inline-elementidel) seda ümbritseda määratud küljest (left, right).

Põhiprintsiibid:

• Voolust eemaldamine: Element, millel on float, ei võta ruumi tavalises dokumendi voos.
• Ümbritsemine: Naaberelemendid (bloki- või inline) ei võta float-i ruumi ning nende sisu (inline-elemendid) ümbritseb seda määratud küljest.
• Mõju vanemale: Vanemkonteiner, mis sisaldab ainult ujuvaid elemente, võib kokku tõmbuda, ignoreerides nende kõrgust.
• clear: Omadus clear (left, right, both) kasutatakse float-i järgnevatel elementidel selle ümbritsemise vältimiseks.

Näide:

.image {
  float: left; /* Pilt nihkub vasakule */
  margin-right: 10px; /* Lisame paremale tekstile vahemaa */
}

.text {
  /* Tekst ümbritseb pilti */
}

Soovitused:

• float kasutamine on vananenud keerukate paigutuste loomiseks ning asendatud Flexboxi või Gridiga.
• float võib siiski olla kasulik piltide ja teksti ümbritsemise efekti loomiseks.
• Vanema konteineri kokkuvarisemise vältimiseks kasutavad tehnikat "clearfix" või overflow: hidden/auto.