Kaip veikia plaukiojantys elementai (floats) CSS…

Plūduriuojantys elementai (floats) CSS išsiskiria iš įprasto dokumento srauto ir yra perkelti nurodytu kryptimi (į kairę arba į dešinę) savo turinčio bloko viduje. Gretimi eilutės elementai ir turinys pradeda apgaubti plūduriuojantį elementą priešinga puse.

Pagrindinės float savybės:

left: Elementas perkeliamas į kairę.
right: Elementas perkeliamas į dešinę.
none: Elementas lieka įprastame sraute (numatytoji reikšmė).
inherit: Paveldi reikšmę iš tėvo.

Dažnai buvo naudojami kuriant daugiakampius maketus iki Flexbox ir Grid atsiradimo.

Elgesio ypatybės:

Plūduriuojantis elementas tampa blokiniu, nepriklausomai nuo pradinio rodymo tipo.
Tėvų konteinerio aukštis neatsižvelgia į plūduriuojančio elemento aukštį, kas gali sukelti "susitraukimą" konteineryje. Šiai problemai spręsti naudojami valymo metodai (clearing).

Valymo metodai (clearing):

clear savybė: taikoma elementui, kad būtų išvengta jo apgaubimo plūduriuojančiais elementais. Reikšmės: left, right, both, none, inherit.
```
/* Elementas neapgaubs plūduriuojančių elementų iš abiejų pusių */
.clear-both {
  clear: both;
}
```
Srauto nulidinimas (clearfix hack): Pseudoelemento :after pridėjimas prie tėvinio konteinerio su clear: both ir kitais stiliais, siekiant išvengti susitraukimo.
```
/* Klasikinis clearfix */
.clearfix::after {
  content: "";
  display: table; /* arba "block" */
  clear: both;
}
```

Nepaisant modernesnių maketavimo metodų atsiradimo, float vis dar gali būti naudingas mažiems elementams, pavyzdžiui, vaizdo įdėjimui tekste.

Kaip veikia plaukiojantys elementai (floats) CSS?