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

Ujuvad elemente (floats) CSS-is väljuvad dokumendi tavast ja nihkuvad määratud suunas (vasakule või paremale) oma konteineris. Naabruses olevad ridaelemendid ja sisu hakkavad ujuva elementi ümbritsema vastupidises suunas.

Peamised float omadused:

left: Element nihkub vasakule.
right: Element nihkub paremale.
none: Element jääb tavapärasesse voogu (vaikimisi väärtus).
inherit: pärib väärtuse vanemelt.

Need olid sageli kasutusel mitmekülgsete paigutuste loomisel enne Flexboxi ja Gridi ilmumist.

Käitumise eripärad:

Ujuv element muutub blokielemendiks, sõltumata algsest kuvamisest.
Vanema konteineri kõrgus ei arvesta ujuva elemendi kõrgust, mis võib põhjustada konteineri "kokkusurumist". Selle probleemi lahendamiseks kasutatakse puhastusmeetodeid (clearing).

Puhastusmeetodid (clearing):

clear omadus: rakendatakse elemendile, et vältida selle ümbritsemist ujuvate elementidega. Väljad: left, right, both, none, inherit.
```
/* Element ei ümbritse ujuvaid elemente mõlemal küljel */
.clear-both {
  clear: both;
}
```
Voogu puhastamine (clearfix hack): pseudoelemendi :after lisamine vanemkonteinerile koos clear: both ja teiste stiilidega, et vältida kokkusurumist.
```
/* Klasikaline clearfix */
.clearfix::after {
  content: "";
  display: table; /* või "block" */
  clear: both;
}
```

Hoolimata kaasaegsemate paigutusmeetodite ilmumisest võib float siiski olla kasulik väikeste elementide, näiteks pildi paigutamiseks teksti sees.

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