Ce sunt elementele flotante (float) în CSS?

Elementele flotante (float) în CSS sunt o proprietate care permite mutarea unui element din fluxul normal al documentului și plasarea sa pe stânga sau dreapta containerului său. Elementele adiacente și textul vor înconjura acest element flotant.

Valori principale ale proprietății float:

• left: Elementul plutește spre stânga.
• right: Elementul plutește spre dreapta.
• none: Elementul rămâne în fluxul normal (valoarea implicită).
• inherit: Moștenește valoarea de la părinte.

Exemple de utilizare:

.float-left {
  float: left; /* Elementul va pluti spre stânga */
  margin-right: 10px; /* Adaugă spațiu la dreapta pentru text */
}

.float-right {
  float: right; /* Elementul va pluti spre dreapta */
  margin-left: 10px; /* Adaugă spațiu la stânga pentru text */
}

Caracteristici ale comportamentului:

• Elementul flotant este eliminat din fluxul normal al documentului, dar influențează poziționarea elementelor și textului adiacente.
• Părintele elementului flotant poate "să se contracteze", deoarece copiii flotanți nu afectează înălțimea sa în fluxul normal. Pentru a evita acest lucru, se folosesc tehnici precum clear sau altele, de exemplu, overflow: hidden sau Flexbox/Grid.
• Proprietatea clear permite specificarea pe ce parte elementele flotante nu trebuie să fie:

  .clear-left {
    clear: left; /* Elementul va fi plasat sub orice element flotant din stânga */
  }
  
  .clear-right {
    clear: right; /* Elementul va fi plasat sub orice element flotant din dreapta */
  }
  
  .clear-both {
    clear: both; /* Elementul va fi plasat sub orice element flotant de pe ambele părți */
  }
  

Din punct de vedere istoric, elementele flotante au fost folosite pentru a crea layout-uri multi-coloană, dar acum este recomandat să se folosească Flexbox sau CSS Grid pentru o mai mare flexibilitate și previzibilitate. Cu toate acestea, float este în continuare util pentru învelirea textului în jurul imaginilor sau altor elemente.