css властивість float


Властивість 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 не зливаються з відступами сусідів, на відміну від звичайних блочних елементів.
Нотатка:

Абсолютно позиційовані елементи ігнорують властивість float.

Порада:

Відмічуо, що значення властивості впливає лише на той елемент для якого вона задана.

Порада:

Сторінки CSS3, для яких можна буде задавати float, зараз знаходяться тільки у розробці. Тому CSS3-значення наведені тут, можуть змінюватися у майбутньому. Наприклад поки що під питанням залишаються: block-start, block-end, top, bottom, snap-block, snap-inline.

Синтаксис

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.

Демонстрація роботи властивості

Динамічний приклад

Додаткові посилання