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

автор: Svitlana

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

Синтаксис

float: none|left|right|initial|inherit|inline-start|inline-end;

Властивість float може отримувати 7 значень:

none

Обтікання елемента не задано. Без задання.

автор: Svitlana

left

Вирівнює елемент по лівому краю, а всі інші елементи обтікають його по правому.

автор: Svitlana

right

Вирівнює елемент по правому краю, а всі інші елементи будуть обтікати його по лівому.

автор: Svitlana

initial

Встановлює властивість у значення без задання

автор: Svitlana

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

inline-start

Вирівнює елемент по першій лінії лівого кута області для обтікання.

автор: Svitlana

inline-end

Вирівнює елемент по останній лінії лівого кута області для обтікання.

автор: Svitlana

Значення без задання:	none
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.cssFloat="left"