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
| Zastosowanie | Wszystkie elementy HTML |
|---|---|
| Obsługiwane wartości | Słowa kluczowe: left, right, none, inline-start, inline-end |
| Wartość początkowa | none |
| Dziedziczenie | Nie |
| Specyfikacja CSS | CSS 2, float |
