Mis on CSS-is ujuvad elemendid (float)?

CSS-is uju elemendid (float) on omadus, mis võimaldab elemendil liikuda tavapärasest dokumendi voost välja ja paigutada see oma konteineri vasakule või paremale. Naaberelemendid ja tekst ümbritsevad seda ujuvat elementi.

float omaduse põhiväärtused:

• left: element ujuvad vasakul.
• right: element ujuvad paremal.
• none: element jääb tavapärasesse voogu (vaikimisi väärtus).
• inherit: pärib vanemelt.

Kasutusnäited:

.float-left {
  float: left; /* Element ujuvad vasakul */
  margin-right: 10px; /* Lisame paremale tekstile vahemaa */
}

.float-right {
  float: right; /* Element ujuvad paremal */
  margin-left: 10px; /* Lisame vasakule tekstile vahemaa */
}

Omadused:

• Ujuv element eemaldub tavapärasest voost, kuid mõjutab naaberelementide ja teksti paigutust.
• Ujuv vanemelement võib "kokku tõmbuda", kuna ujuvad lapsed ei mõjuta selle kõrgust tavapärases voos. Selle probleemi lahendamiseks kasutatakse clear meetodit või muid tehnikaid, näiteks overflow: hidden või Flexbox/Grid.
• clear omadus määrab, millise poole ujuvad elemendid ei tohiks paikneda:

  .clear-left {
    clear: left; /* Element paikneb all vasakule ujuvatest elementidest */
  }
  
  .clear-right {
    clear: right; /* Element paikneb all paremale ujuvatest elementidest */
  }
  
  .clear-both {
    clear: both; /* Element paikneb all mõlemast ujuvast elemendist */
  }
  

Ujuvad elemendid on ajalooliselt kasutatud mitmekolonniliste paigutuste loomiseks, kuid nüüd on selleks eelistatumad Flexbox või CSS Grid nende parema paindlikkuse ja ennustatavuse tõttu. Kuid float on endiselt kasulik piltide või teiste elementide teksti ümber voogimiseks.