CSS float

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS float

Właściwość CSS float służy do ustawienia elementu po lewej lub prawej stronie względem otaczającej treści i innych elementów. Najczęściej kojarzona jest z opływaniem obrazków przez tekst, ale może być stosowana także do elementów blokowych.

Najważniejsze wartości

  • float: left; - element zostaje przesunięty do lewej strony, a inne treści mogą go opływać z prawej,
  • float: right; - element zostaje przesunięty do prawej strony, a inne treści mogą go opływać z lewej,
  • float: none; - brak pływania, wartość domyślna.

Przykład

.box {
  width: 200px;
  height: 100px;
  float: left;
}

Taki blok zostanie ustawiony po lewej stronie względem innych elementów. Kolejne elementy mogą układać się obok niego, jeśli mają wystarczająco dużo miejsca.

Czego float nie robi?

float: left; nie służy do wyrównywania tekstu do lewej. Do wyrównania tekstu używa się właściwości:

text-align: left;

float nie oznacza też automatycznego układania bloków jeden pod drugim. Wręcz przeciwnie - elementy pływające mogą ustawiać się obok siebie.

Uwaga praktyczna

Dawniej float często wykorzystywano do budowania układów stron. Obecnie do layoutów częściej stosuje się flexbox lub grid, ale float nadal pojawia się w egzaminach i starszym kodzie CSS.