Kas ir plūstošie elementi (float) CSS?

CSS pludiņie elementi (float) ir īpašība, kas ļauj elementu pārvietot no parastā dokumenta plūsmas un novietot to pa kreisi vai pa labi no tā esošā konteinerā. Blakus esošie elementi un teksts apvij šo pludiņojošo elementu.

Galvenās float īpašības vērtības:

• left: elements plūst pa kreisi.
• right: elements plūst pa labi.
• none: elements paliek parastajā plūsmā (noklusējuma vērtība).
• inherit: manto no vecāka.

Piemēri:

.float-left {
  float: left; /* Elements plūst pa kreisi */
  margin-right: 10px; /* Pievienojam atstarpi labajā tekstā */
}

.float-right {
  float: right; /* Elements plūst pa labi */
  margin-left: 10px; /* Pievienojam atstarpi kreisajā tekstā */
}

Īpašības:

• Pludiņš elements tiek izņemts no standarta plūsmas, bet ietekmē blakus esošo elementu un teksta izvietojumu.
• Pludiņš vecākais elements var "sasprausties", jo pludiņi bērni neietekmē tā augstumu parastajā plūsmā. Šo problēmu risina ar clear vai citām tehnikām, piemēram, overflow: hidden vai Flexbox/Grid.
• clear īpašība nosaka, no kuras puses nedrīkst būt pludiņi:

  .clear-left {
    clear: left; /* Elements tiks novietoti zem visiem pludiņiem pa kreisi */
  }
  
  .clear-right {
    clear: right; /* Elements tiks novietoti zem visiem pludiņiem pa labi */
  }
  
  .clear-both {
    clear: both; /* Elements tiks novietoti zem visiem pludiņiem */
  }
  

Pludiņi elementi vēsturiski tika izmantoti daudzkolonnu izkārtojumu veidošanai, bet šobrīd šim mērķim biežāk izmanto Flexbox vai CSS Grid, jo tie ir elastīgāki un paredzamāki. Tomēr float joprojām ir noderīgs attēlu vai citu elementu tekstā apvijšanai.