Jak działają elementy pływające (floats) w CSS…

Elementy pływające (floats) w CSS są wyłączane z normalnego przepływu dokumentu i przesuwają się w określonym kierunku (w lewo lub w prawo) wewnątrz swojego kontenera. Sąsiadujące elementy inline i zawartość zaczynają otaczać element pływający z przeciwnej strony.

Główne właściwości float:

left: Element przesuwa się w lewo.
right: Element przesuwa się w prawo.
none: Element pozostaje w normalnym przepływie (domyślna wartość).
inherit: Dziedziczy wartość od rodzica.

Były często używane do tworzenia układów wielokolumnowych przed pojawieniem się Flexbox i Grid.

Charakterystyka zachowania:

Element pływający staje się blokiem, niezależnie od pierwotnego typu wyświetlania.
Wysokość kontenera nadrzędnego nie uwzględnia wysokości elementu pływającego, co może prowadzić do "zapadnięcia" kontenera. Aby temu zapobiec, stosuje się metody czyszczenia (clearing).

Metody czyszczenia:

Właściwość clear: stosowana do elementu, aby zapobiec jego otaczaniu przez elementy pływające. Wartości: left, right, both, none, inherit.
```
/* Element nie będzie otaczał elementów pływających z obu stron */
.clear-both {
  clear: both;
}
```
Technika clearfix: dodanie pseudo-elementu :after do kontenera nadrzędnego z clear: both i innymi stylami, aby zapobiec zapadnięciu.
```
/* klasyczny clearfix */
.clearfix::after {
  content: "";
  display: table; /* lub "block" */
  clear: both;
}
```

Pomimo pojawienia się nowoczesnych metod układania, float nadal może być przydatny dla małych elementów, np. do umieszczenia obrazu w tekście.

Jak działają elementy pływające (floats) w CSS?