Właściwość CSS float

Definicja stylu, przeznaczenie i użycie float

Styl definiuje kierunek oblewania elementu. Właściwość float określa, w jaki sposób element powinien się unosić w obszarze zawartości swojego elementu HTML rodzica

Uwaga: elementy pozycjonowane absolutnie ignorują właściwość float!

Uwaga: elementy po elemencie pływającym będą opływać go. Aby tego uniknąć, użyj właściwości clear lub hacka clearfix (zobacz przykład na dole tej strony).

Wartości właściwości float

Składnia CSS float

float: none | left | right | initial | inherit;

Wsparcie przeglądarek dla właściwości float

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
float	1.0	4.0	1.0	1.0	7.0

Przykładowe zastosowania z właściwością float

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

div#myDIV {
  width:100px;
  background-color:red;
  float:none;
}

Przykłady właściwości float

1. float: left;

2. float: none;

3. float: right;

4. .clearfix::after {
content: "";
clear: both;
display: table;
}

5. img {
float: left;
}
p.clear {
clear: both;
}