Własność CSS float

Własność CSS float powoduje przemieszczenie elementu w kierunku lewej lub prawej krawędzi kontenera, pozwalając wejść treści tekstowej i elementom śródliniowym na zwolnione miejsce po jego prawej lub lewej stronie.

Element, który ma zdefiniowaną własność float o wartości innej niż none jest elementem pozycjonowane, który został wyjęty z układu normalnego, ale nadal biorącym udział w ustalaniu rozmieszczenia elementów na stronie.

Wartości i składnia

Własność float przyjmuje jedno z poniższych słów kluczowych:

left

Powoduje przemieszczenie elementu w kierunku lewej krawędzi jego kontenera blokowego.

right

Powoduje przemieszczenie elementu w kierunku prawej krawędzi jego kontenera blokowego.

none

Wyłącza ten rodzaj pozycjonowania elementu.

inline-start

Logiczna wartość kierunkowa powodująca spływanie elementu w kierunku krawędzi początkowej jego kontenera blokowego w orientacji śródliniowej. W przypadku tekstów w języku polskim słowo to jest równoważne ze słowem kluczowym left.

inline-end

Logiczna wartość kierunkowa powodująca spływanie elementu w kierunku krawędzi końcowej jego kontenera blokowego w orientacji śródliniowej. W przypadku tekstów w języku polskim słowo to jest równoważne ze słowem kluczowym right.

Przykłady

W poniższym przykładzie element aside spłynie w kierunku lewej krawędzi swojego kontenera, a znajdująca się za nim treść śródliniowa (tekst i elementy śródliniowe) wejdzie na zwolnione miejsce po jego prawej stronie.

aside {
  float: left;
}

Więcej przykładów i bardziej szczegółowy opis technik pozycjonowania elementów pływających znajduje się na stronie Pozycjonowanie elementów w CSS w sekcji Pozycjonowanie pływające.

Podsumowanie