css властивість float
Властивість float
визначає, по якій стороні буде вирівнений елемент, при цьому інші елементи будуть обтікати його з іншої сторони.
В CSS є блокові елементи (завжди починаються з нового рядка), а є рядкові (відображаються на сторінці в один рядок).
Тобто, коли ми маємо два абзаци, то вони будуть знаходитися один під одним. І один із способів перевизначити елементам тип обтікання - це використати властивість float
. Початково, властивість float
визначалася, як властивість за допомогою якого розробник міг би задати, що елемент буде вирівнений ліворуч, праворуч відносно інших елементів, або взагалі не буде обтікатися.
CSS3 розширює попереднє визначення, дозволяючи властивості впливати на рядкові елементи, колонки і сторінки.
При застосуванні цієї властивості відбувається наступне:
- Елемент позиціонується як зазвичай, а потім виймається з потоку і зсувається вліво (для
left
) або вправо (дляright
) до того як торкнеться або кордону батька, або іншого елемента зfloat
. - Якщо простору по горизонталі не вистачає для того, щоб вмістити елемент, то він зсувається вниз до тих пір, поки не почне поміщатися.
- Інші непозиціоновані блокові елементи без
float
поводяться так, як ніби елемента зfloat
немає, так як він прибраний з потоку. - Рядки (inline-елементи), навпаки, «знають» про
float
і обтікають елемент по сторонам.
Ще деталі:
- Елемент при наявності
float
отримуєdisplay: block
.
Тобто, вказавши елементу, у якого display: inline
властивість float: left / right
, ми автоматично зробимо його блоковим. Зокрема, для нього будуть працювати width / height
.
Винятком є деякі рідкісні display
зразок inline-table
і run-in
.
- Ширина
float-блоку
визначається за вмістом. - Вертикальні відступи
margin
елементів зfloat
не зливаються з відступами сусідів, на відміну від звичайних блочних елементів.
Нотатка: | Абсолютно позиційовані елементи ігнорують властивість |
Порада: | Відмічуо, що значення властивості впливає лише на той елемент для якого вона задана. |
Порада: | Сторінки CSS3, для яких можна буде задавати |
Синтаксис
float: none|left|right|initial|inherit|inline-start|inline-end;
Властивість float може отримувати 7 значень:
none
Обтікання елемента не задано. Без задання.
left
Вирівнює елемент по лівому краю, а всі інші елементи обтікають його по правому.
right
Вирівнює елемент по правому краю, а всі інші елементи будуть обтікати його по лівому.
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивості від свого батьківського елемента
inline-start
Вирівнює елемент по першій лінії лівого кута області для обтікання.
inline-end
Вирівнює елемент по останній лінії лівого кута області для обтікання.
Значення без задання: | none |
---|---|
Наслідує: | Ні |
Анімується: | Ні |
JavaScript синтаксис: | object.style.cssFloat="left" |
Переглядачі
Переглядач | |||||
---|---|---|---|---|---|
float | 1.0 |
4.0 |
1.0 |
1.0 |
7.0 |
Переглядач | |||
---|---|---|---|
float | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Приклад того, як обтікання впливає на сусідні елементи
Простий приклад роботи властивості float.
Демонстрація роботи властивості
Динамічний приклад