Kas yra plaukiojantys elementai (float) CSS?

CSS'e plaukiojantys elementai (float) yra savybė, leidžianti elementui perkelti jį iš įprasto dokumento srauto ir išdėstyti jį kairėje arba dešinėje savo konteinerio pusėje. Gretimi elementai ir tekstas apgaubs šį plaukiojantį elementą.

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

• left: elementas plaukioja kairėje.
• right: elementas plaukioja dešinėje.
• none: elementas lieka įprastame sraute (numatytoji reikšmė).
• inherit: paveldi tėvo reikšmę.

Naudojimo pavyzdžiai:

.float-left {
  float: left; /* Elementas plaukioja kairėje */
  margin-right: 10px; /* Pridedame tarpą dešinėje tekstui */
}

.float-right {
  float: right; /* Elementas plaukioja dešinėje */
  margin-left: 10px; /* Pridedame tarpą kairėje tekstui */
}

Savybės:

• Plaukiojantis elementas išsiskiria iš įprasto srauto, tačiau veikia šalia esančių elementų ir teksto išdėstymą.
• Plaukiojantis tėvinis elementas gali "sulipti", nes plaukiojantys vaikai neveikia jo aukščio įprastame sraute. Šį problemą sprendžia clear metodas arba kitos technikos, pavyzdžiui, overflow: hidden arba Flexbox/Grid.
• clear savybė nurodo, iš kurios pusės neturi būti plaukiojančių elementų:

  .clear-left {
    clear: left; /* Elementas bus žemiau bet kurio kairėje plaukiojančio elemento */
  }
  
  .clear-right {
    clear: right; /* Elementas bus žemiau bet kurio dešinėje plaukiojančio elemento */
  }
  
  .clear-both {
    clear: both; /* Elementas bus žemiau bet kurio plaukiojančio elemento */
  }
  

Plaukiojantys elementai istoriškai naudoti kuriant daugiakampius maketus, tačiau dabar šiam tikslui dažniau naudojami Flexbox arba CSS Grid dėl jų geresnio lankstumo ir prognozuojamumo. Tačiau float vis dar naudinga tekstui apgaubti paveikslėlius ar kitus elementus.