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

Float w CSS to właściwość, która pozwala elementowi "pływać" w lewo lub w prawo od otaczającej go zawartości.

Główne cechy:

• Przesunięcie: Element z zastosowaną właściwością float przesuwa się do lewego lub prawego brzegu swojego kontenera nadrzędnego (lub innego elementu float).
• Otaczanie: Normalna zawartość blokowa lub liniowa (tekst, obrazy) otacza element float.
• Kontekst przepływu: Elementy float są częściowo wyłączone z normalnego przepływu dokumentu, ale wpływają na pozycjonowanie innych elementów.
• Zastosowanie: Początkowo używane do organizacji kolumn lub umieszczania obrazów z tekstem wokół nich. W nowoczesnym projektowaniu częściej stosuje się Flexbox lub Grid.

Typowe wartości właściwości float:

• left: Element pływa na lewo.
• right: Element pływa na prawo.
• none: Element nie pływa (domyślna wartość).
• inherit: Dziedziczy wartość od elementu nadrzędnego.
• initial: Ustawia wartość domyślną.

Problemy z float:

• Kurczenie się kontenera nadrzędnego: Kontener zawierający tylko elementy float może się skurczyć na wysokości.
• Czyszczenie: Aby zapobiec otaczaniu przez kolejne elementy, należy użyć właściwości clear.

.image-float {
  float: left; /* Obraz będzie pływał po lewej stronie */
  margin-right: 10px; /* Odstęp po prawej stronie od obrazu */
}

.text-content {
  /* Ten tekst będzie otaczał obraz */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Czyszczenie otaczania po elementach float */
}