Ce sunt elementele flotante (floats) în CSS?

Float în CSS este o proprietate care permite unui element să "plutească" spre stânga sau spre dreapta față de conținutul care îl înconjoară.

Caracteristici principale:

• Deplasare: Elementul cu proprietatea float aplicată se deplasează către marginea stângă sau dreaptă a containerului său părinte (sau a altui element flotant).
• Împachetare: Conținutul normal de bloc sau inline (text, imagini) înconjoară elementul flotant.
• Context de flux: Elementele flotante sunt parțial scoase din fluxul normal al documentului, dar influențează poziționarea altor elemente.
• Aplicare: Inițial folosit pentru organizarea coloanelor sau plasarea imaginilor cu text în jurul lor. În designul modern, se folosesc mai frecvent Flexbox sau Grid.

Valori tipice ale proprietății float:

• left: Elementul plutește spre stânga.
• right: Elementul plutește spre dreapta.
• none: Elementul nu plutește (valoare implicită).
• inherit: Moștenește valoarea de la părinte.
• initial: Setează valoarea implicită.

Probleme cu float:

• Colapsarea containerului părinte: Containerul care conține doar elemente flotante poate colapsa pe înălțime.
• Curățare: Pentru a preveni înconjurarea de către elementele următoare, se folosește proprietatea clear.

.image-float {
  float: left; /* Imaginea va pluti spre stânga */
  margin-right: 10px; /* Margine dreapta a imaginii */
}

.text-content {
  /* Acest text va înconjura imaginea */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Curățarea fluxului după elementele flotante */
}