| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | none |
|---|---|
| Наслідується | Ні |
| Застосовується | До всіх елементів (крім абсолютно позиціонованих) |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/visuren.html#propdef-float |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Визначає, з якої сторони буде вирівнюватися елемент, при цьому інші елементи обтікають його з інших сторін. Коли значення властивості float дорівнює none, елемент виводиться на сторінці як зазвичай, при цьому допускається, що один рядок обтікаючого тексту може бути на тій же лінії, що і сам елемент.
Синтаксис
float: left | right | none | inherit
Значення
- left
- Вирівнює елемент по лівому краю, а всі інші елементи, наприклад, текст, обтікають його по правій стороні.
- right
- Вирівнює елемент по правому краю, а всі інші елементи обтікають його по лівій стороні.
- none
- Обтікання елемента не задається.
- inherit
- Наслідує значення батька.
Приклад
HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float</title>
<style>
.layer1 {
float: left; /* Обтікання по правому краю */
background: #fd0; /* Колір фону */
border: 1px solid black; /* Параметри рамки */
padding: 10px; /* Поля навколо тексту */
margin-right: 20px; /* Відступ справа */
width: 40%; /* Ширина блоку */
}
</style>
</head>
<body>
<div class="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
</div>
</body>
</html>Результат даного прикладу показаний на рис. 1.
Об'єктна модель
[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat
Браузери
У браузері Internet Explorer 6 спостерігається помилка з подвоєнням значення лівого або правого відступу для плаваючих елементів, вкладених в батьківські елементи. Подвоюється той відступ, який дотикається до сторони батька. Проблему зазвичай вирішується додаванням display: inline для плаваючого елемента. Також у цьому браузері додається відступ 3px (так званий «трипіксельний баг») у напрямку, заданим значенням float.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.