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

Elementele flotante (float) în CSS sunt scoase din fluxul normal al documentului și sunt deplasate în direcția specificată (stânga sau dreapta) în interiorul blocului lor de conținut. Elementele adiacente în linie și conținutul încep să înconjoare elementul flotant din partea opusă.

Proprietățile principale ale float:

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

Au fost frecvent folosite pentru crearea de layout-uri multi-coloană înainte de apariția Flexbox și Grid.

Caracteristici de comportament:

Elementul flotant devine bloc, indiferent de tipul inițial de afișare.
Înălțimea containerului părinte nu ia în considerare înălțimea elementului flotant, ceea ce poate duce la "prăbușirea" containerului. Pentru a rezolva această problemă, se folosesc metode de curățare (clearing).

Metode de curățare:

Proprietatea clear: Se aplică unui element pentru a preveni înconjurarea sa de elemente flotante. Valori: left, right, both, none, inherit.
```
/* Elementul nu va înconjura elementele flotante de pe ambele părți */
.clear-both {
  clear: both;
}
```
Tehnica clearfix: Adăugarea unui pseudo-element :after la containerul părinte cu clear: both și alte stiluri pentru a preveni prăbușirea.
```
/* clearfix clasic */
.clearfix::after {
  content: "";
  display: table; /* sau "block" */
  clear: both;
}
```

În ciuda apariției metodelor moderne de layout, float poate fi încă util pentru elemente mici, de exemplu, pentru plasarea unei imagini în interiorul textului.

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