Mis on CSS-is ujuvad elemendid (floats)?

Float CSS-is omadus, mis võimaldab elemendil 'ujuda' vasakule või paremale selle sisu ümber.

Peamised omadused:

• Kohalejõudmine: Element, millele on rakendatud float omadus, nihkub oma vanemkonteineri (või teise float-elemendi) vasakule või paremale äärele.
• Kattumine: Tavaline plokk- või ridaelement (tekst, pildid) kattub ujuva elemendiga.
• Voogkontekst: Ujuvad elemendid väljuvad osaliselt dokumendi normaalvoost, kuid mõjutavad teiste elementide positsioneerimist.
• Rakendamine: Alguses kasutati kolumnide korraldamiseks või piltide ja teksti ümberpaigutamiseks. Tänapäeva kujunduses kasutatakse sagedamini Flexboxi või Grid-i.

Tüüpilised float omaduse väärtused:

• left: Element ujuvad vasakule.
• right: Element ujuvad paremale.
• none: Element ei uju (vaikimisi väärtus).
• inherit: Järglikult pärib vanemelt väärtuse.
• initial: Seadistab vaikimisi väärtuse.

Float-iga seotud probleemid:

• Vanema kokkusurutamine: Vanemkonteiner, mis sisaldab ainult ujuvaid elemente, võib kõrguse poolest kokku tõmbuda.
• Puhastamine: Ujuvate elementide järgsete elementide kattumise vältimiseks tuleb kasutada clear omadust.

.image-float {
  float: left; /* Pilt ujuvad vasakule */
  margin-right: 10px; /* Väljaõige pildi paremal küljel */
}

.text-content {
  /* See tekst kattub pildiga */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Puhastab ujuvad elemendid pärast */
}