Właściwość pływaka CSS
Przykład
Niech obraz unosi się w prawo:
img
{
float: right;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość float
określa, czy element powinien unosić się w lewo, w prawo, czy wcale.
Uwaga: Elementy pozycjonowane bezwzględnie ignorują float
właściwość!
Uwaga: Elementy obok elementu pływającego będą opływać go. Aby tego uniknąć, użyj właściwości clear lub hacka Clearfix (patrz przykład na dole tej strony).
Domyślna wartość: | Żaden |
---|---|
Dziedziczny: | nie |
Animowalny: | nie. Przeczytaj o animacji |
Wersja: | CSS1 |
Składnia JavaScript: | obiekt .style.cssFloat="lewo" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Składnia CSS
float: none|left|right|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Niech obraz unosi się w lewo:
img
{
float: left;
}
Przykład
Niech obraz będzie wyświetlany dokładnie tam, gdzie występuje w tekście (liczba zmiennoprzecinkowa: brak):
img
{
float: none;
}
Przykład
Niech pierwsza litera akapitu unosi się w lewo i nada jej styl:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Przykład
Użyj float z listą hiperłączy, aby utworzyć poziome menu:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Przykład
Użyj float, aby utworzyć stronę główną z nagłówkiem, stopką, treścią po lewej stronie i treścią główną:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Przykład
Nie zezwalaj na elementy pływające po lewej lub prawej stronie określonego elementu <p>:
img {
float: left;
}
p.clear {
clear: both;
}
Przykład
Jeśli element pływający jest wyższy niż element zawierający, przeleje się poza jego kontener. Można to naprawić za pomocą „hackowania Clearfix”:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Powiązane strony
Samouczek CSS: CSS Float
Dokumentacja HTML DOM: właściwość cssFloat