Cum funcționează elementele flotante (floats) în CSS?

float elimină un element din fluxul normal al documentului, permițând altor elemente (de obicei text sau inline) să îl înconjoare din partea specificată în proprietate (left, right).

Principii de bază:

• Eliminarea din flux: Un element cu float nu ocupă spațiu în fluxul normal al documentului.
• Împachetare: Elementele bloc adiacente nu vor ocupa spațiul elementului cu float, iar conținutul lor (elemente inline) îl va înconjura din partea specificată.
• Influența asupra părintelui: Înălțimea containerului părinte, care conține doar elemente flotante, poate să se reducă, ignorând înălțimea lor.
• clear: Proprietatea clear (left, right, both) este utilizată pentru a preveni înconjurarea de către elemente plasate după elementul flotant.

Exemplu:

.image {
  float: left; /* Imaginea se deplasează spre stânga */
  margin-right: 10px; /* Se adaugă spațiu la dreapta pentru text */
}

.text {
  /* Textul va înconjura imaginea */
}

Recomandări:

• Utilizarea float este învechită pentru crearea de layout-uri complexe și a fost înlocuită de Flexbox sau Grid.
• float poate fi încă util pentru a crea efecte de înconjurare a imaginilor cu text.
• Pentru a preveni colapsul containerului părinte atunci când se folosește float, se aplică tehnici precum "clearfix" sau overflow: hidden/auto pe părinte.