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

Мобільних переглядачів ще не додано.

Приклади

Приклад того, як обтікання впливає на сусідні елементи

See the Pen <a href='https://codepen.io/MichaelBondar/pen/mMrbGy/'>float-2</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Простий приклад роботи властивості float.

See the Pen <a href='https://codepen.io/MichaelBondar/pen/eEdOWe/'>float-1</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/NyqwNa/'>NyqwNa</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/YeXEGy/'>YeXEGy</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.