Czym są elementy pływające (float) w CSS?

Elementy pływające (float) w CSS to właściwość, która pozwala przesunąć element z normalnego przepływu dokumentu i umieścić go po lewej lub prawej stronie swojego kontenera. Sąsiednie elementy i tekst będą otaczać ten element pływający.

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

• left: Element pływa po lewej stronie.
• right: Element pływa po prawej stronie.
• none: Element pozostaje w normalnym przepływie (domyślna wartość).
• inherit: Dziedziczy wartość od rodzica.

Przykłady użycia:

.float-left {
  float: left; /* Element będzie pływał po lewej stronie */
  margin-right: 10px; /* Dodajemy margines po prawej stronie dla tekstu */
}

.float-right {
  float: right; /* Element będzie pływał po prawej stronie */
  margin-left: 10px; /* Dodajemy margines po lewej stronie dla tekstu */
}

Charakterystyka zachowania:

• Pływający element jest usuwany z normalnego przepływu dokumentu, ale wpływa na ułożenie sąsiednich elementów i tekstu.
• Rodzic pływającego elementu może "się skurczyć", ponieważ dzieci pływające nie wpływają na jego wysokość w normalnym przepływie. Aby tego uniknąć, stosuje się techniki takie jak clear lub inne, np. overflow: hidden lub Flexbox/Grid.
• Właściwość clear pozwala określić, od której strony nie powinny znajdować się elementy pływające:

  .clear-left {
    clear: left; /* Element będzie umieszczony poniżej każdego elementu pływającego po lewej stronie */
  }
  
  .clear-right {
    clear: right; /* Element będzie umieszczony poniżej każdego elementu pływającego po prawej stronie */
  }
  
  .clear-both {
    clear: both; /* Element będzie umieszczony poniżej każdego elementu pływającego z obu stron */
  }
  

Historycznie, elementy pływające były używane do tworzenia wielokolumnowych układów, ale obecnie do tego celu preferuje się użycie Flexbox lub CSS Grid ze względu na ich większą elastyczność i przewidywalność. Jednak float nadal jest przydatny do zawijania tekstu wokół obrazów lub innych elementów.