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

float usuwa element z normalnego przepływu dokumentu, umożliwiając innym elementom (zwykle tekstowym lub inline) otaczanie go z określonej strony, wskazanej w właściwości (left, right).

Podstawowe zasady:

• Usunięcie z przepływu: Element z float nie zajmuje miejsca w normalnym przepływie dokumentu.
• Otaczanie: Sąsiednie elementy blokowe nie zajmą miejsca elementu z float, a ich zawartość (elementy inline) będzie go otaczać z określonej strony.
• Wpływ na rodzica: Wysokość kontenera rodzica, zawierającego tylko elementy pływające, może się skurczyć, ignorując ich wysokość.
• clear: Właściwość clear (left, right, both) służy do zapobiegania otaczaniu przez elementy umieszczone po elemencie pływającym.

Przykład:

.image {
  float: left; /* Obraz przesuwa się w lewo */
  margin-right: 10px; /* Dodaj margines po prawej stronie dla tekstu */
}

.text {
  /* Tekst będzie otaczał obraz */
}

Zalecenia:

• Użycie float jest przestarzałe do tworzenia złożonych układów i zostało zastąpione przez Flexbox lub Grid.
• float nadal może być użyteczny do tworzenia efektów otaczania obrazów tekstem.
• Aby zapobiec zapadaniu się rodzica przy użyciu float, stosuje się techniki takie jak "clearfix" lub overflow: hidden/auto na rodzicu.