Атрибут float в CSS

9 червня 2022 р.480

Зміст

Визначає , по якій стороні вирівнюватиметься елемент, при цьому інші елементи будуть обтікати його з інших сторін. Коли значення властивості float дорівнює none, елемент виводиться на сторінці як завжди, при цьому допускається, що один рядок обтікаючого тексту може бути на тієї ж лінії, що і сам елемент.

="field_css_info">Коротка інформація

Значення за замовчуванням	none
Успадковується	Ні
Застосовується	До всіх елементів (за винятком абсолютно позиціонованих)
Анімується	Ні

Синтаксис

<code>float: left | right | none

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися в зазначеному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

left: Вирівнює елемент по лівому краю, а всі інші елементи, на зразок тексту, обтікають його праворуч.
right: Вирівнює елемент з правого краю, а всі інші елементи обтікають його по лівій стороні.
none: Обтікання елемента не задається .

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, тому що в цей час сніданок уже давно скінчився, а обід ще й не думав починатися. І, звичайно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.

6-desktop playground-values"> none left right

img { float: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float</title> <style> .pull-left { float: left; /* Обтікання блоку з правого краю */
padding-right: 10px; }
</style>
</head>
<body> <div class="pull-left"> <img src="image/figure.jpg" alt="">
</div> <p>Біхевіоризм, хоч би як це здавалося парадоксальним, просвітлює сублімований стимул, так, наприклад, Річард Бендлер для побудови ефективних станів використовував зміну субмодальностей.</p>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Рис. 1. Застосування властивості float

Об'єктна модель

Об'єкт.style.cssFloat

Примітка

У браузері Internet Explorer 6 спостерігається помилка з подвоєння значення лівого або правого відступу для плаваючих елементів, вкладених у батьківські елементи. Подвоюється той відступ, що прилягає до сторони батька. Проблема зазвичай вирішується додаванням display: inline для плаваючого елемента. Також у цьому браузері додається відступ 3px (так званий "трьохпіксельний баг") у напрямку, заданому значенням float.

Специфікація

Специфікація	Статус
CSS Logical Properties and Values Level 1	Робочий проект
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендація
CSS Level 1	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


6	4	12	1	7	1	1


1	1	6	1

Браузери

У таблиці браузерів застосовуються такі позначення.

— властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або властивість підтримується лише стично, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.