Mis on CSS-is ujuvad elemendid (floats)?

CSS Floats — see on positsioneerimise omadus, mis liigutab elementi üheks selle konteineri külgedest (left või right), võimaldades tekstil ja inline-elementidel seda ümbritseda. Element eemaldatakse tavalise dokumendi voost, kuid jääb paigutuse osaks. Alguses kasutati seda mitmeveeruliste paigutuste ja piltide teksti ümberpaigutamiseks, kuid nüüd kasutatakse peamiselt spetsiifiliste ülesannete lahendamiseks, kuna on paindlikumad ja etteaimatavamad meetodid, nagu Flexbox ja Grid.

float omaduse põhiväärtused:

• none: Element kuvatakse tavapärases voos (vaikimisi väärtus).
• left: Element liigub konteineri vasakule küljele.
• right: Element liigub konteineri paremale küljele.
• inherit: pärib väärtuse vanemelt.

Näide kasutamisest:

.image {
  float: left;
  margin-right: 15px; /* vahe paremal pool ümbritsevast tekstist */
}

.text {
  /* Tekst ümbritseb elementi klassiga .image */
}

Float'idega seotud probleemid:

• Voolust väljumine (collapsing surrounding element): Vanemelement, mis sisaldab ainult float'ivaid elemente, võib kokku tõmbuda kõrguselt, kuna need elemendid ei arvesta tema tavalisi mõõtmeid.
• Elementide kattumine: Naaberelemendid võivad kattuda float'iva elemendiga, kui nende mõõtmed ei ole arvestatud.

Probleemide lahendamine:

• clear omadus: määratakse elemendile, mis ei tohiks float'iva elementi ümbritseda. Väärtused: left, right, both, none.
• clearfix tehnika: spetsiaalse klassi lisamine vanemelemendile või pseudoelemendi :after kasutamine, et sunniviisiliselt lõpetada vanem:

.container::after {
  content: "";
  display: table; /* või block */
  clear: both;
}

• Kaasaegsed meetodid: Flexboxi või CSS Grid'i kasutamine keerukate paigutuste loomiseks.

Kuigi float'eid ei peeta kaasaegse veebidisaini põhivahendiks, nende tööpõhimõtte mõistmine on oluline vanema koodi toetamiseks ja spetsiifiliste ülesannete lahendamiseks, näiteks piltide teksti ümberpaigutamine.