Kas yra plaukiojantys elementai (floats) CSS?

CSS Float — tai pozicionavimo savybė, kuri perkelia elementą į jo konteinerio vieną iš šonų (left arba right), leidžiant tekstui ir inline elementams jį apeiti. Elementas išimamas iš įprasto dokumento srauto, bet lieka maketo dalimi. Pradžioje jis buvo naudojamas daugiaeiliams maketams ir paveikslėlių apvijimui tekstu, tačiau dabar dažniausiai taikomas sprendžiant specifines užduotis, nes yra lankstesni ir numatomi metodai, tokie kaip Flexbox ir Grid.

Pagrindinės float savybės reikšmės:

• none: Elementas rodomas įprastame sraute (numatytoji reikšmė).
• left: Elementas perkeliamas į konteinerio kairįjį kraštą.
• right: Elementas perkeliamas į konteinerio dešinįjį kraštą.
• inherit: paveldi reikšmę iš tėvinio elemento.

Naudojimo pavyzdys:

.image {
  float: left;
  margin-right: 15px; /* tarpas dešinėje nuo apvijančio teksto */
}

.text {
  /* Tekstas apjuosia elementą su klase .image */
}

Problemų su float'ais sprendimas:

• Iškritimas iš srauto (collapsing surrounding element): Tėvinis elementas, turintis tik float'inius elementus, gali susitraukti pagal aukštį, nes šie elementai nėra įtraukti į jo įprastus matmenis.
• Elementų persidengimas: Gretimi elementai gali persidengti su float'iniu elementu, jei jų matmenys nėra įvertinti.

Sprendimo būdai:

• clear savybė: nustatoma elementui, kuris neturi apvynioti float'ą. Reikšmės: left, right, both, none.
• clearfix technika: pridedant specialų klasės pavadinimą tėviniam elementui arba naudojant pseudo-elementą :after, siekiant priverstinai užbaigti tėvinio elemento formavimą:

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

• Šiuolaikiniai metodai: naudojant Flexbox arba CSS Grid sudėtingiems išdėstymams kurti.

Nors float'ai nėra pagrindinis įrankis šiuolaikiniame tinklalapio maketavime, jų veikimo supratimas svarbus palaikant senesnį kodą ir sprendžiant specifines užduotis, pavyzdžiui, paveikslėlių apvijimą tekstu.