CSS свойство float
Определение и применение
CSS свойство float определяет будет ли элемент плавающим. Если элемент имеет абсолютное позиционирование
(position :
absolute;), то элементы будут игнорировать значения свойства float.
Попробуйте значения float
Плавающий блок перемещается к краю, текст обтекает его. flow-root у контейнера удерживает float внутри рамки.
float: none
HTML и CSS примера
HTML
<div class="stage">
<div class="demo-target">Float</div>
Текст рядом с блоком показывает обтекание. Когда строка проходит ниже блока,
текст снова занимает всю доступную ширину контейнера.
</div>
CSS
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
min-height: 180px;
display: flow-root;
border: 2px dashed #607589;
padding: 12px;
background: #edf2f5;
color: #172c3d;
font: 16px/1.5 system-ui;
}
.demo-target {
padding: 10px;
border: 2px solid #245a85;
background: #ffe4bd;
width: 90px;
height: 90px;
margin: 8px;
float: none;
}
.neighbor {
padding: 8px;
background: #b9d7eb;
}
CSS
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
min-height: 180px;
display: flow-root;
border: 2px dashed #607589;
padding: 12px;
background: #edf2f5;
color: #172c3d;
font: 16px/1.5 system-ui;
}
.demo-target {
padding: 10px;
border: 2px solid #245a85;
background: #ffe4bd;
width: 90px;
height: 90px;
margin: 8px;
float: left;
}
.neighbor {
padding: 8px;
background: #b9d7eb;
}
CSS
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
min-height: 180px;
display: flow-root;
border: 2px dashed #607589;
padding: 12px;
background: #edf2f5;
color: #172c3d;
font: 16px/1.5 system-ui;
}
.demo-target {
padding: 10px;
border: 2px solid #245a85;
background: #ffe4bd;
width: 90px;
height: 90px;
margin: 8px;
float: right;
}
.neighbor {
padding: 8px;
background: #b9d7eb;
}
Поддержка браузерами
Спецификации: css2, CSS logical
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
float | 1 | 12 | 1 | 7 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 | 1 |
inline-end | 118 | 118 | 55 | 104 | 15 | 118 | 55 | 79 | 15 | 25.0 | 118 | 15 |
inline-start | 118 | 118 | 55 | 104 | 15 | 118 | 55 | 79 | 15 | 25.0 | 118 | 15 |
left | 1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
none | 1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
right | 1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
CSS
float:"none | left | right | initial | inherit";
JavaScript синтаксис:
JavaScript
object.style.cssFloat = "right"
Значения свойства
| Значение | Описание |
|---|---|
none |
Элемент не является плавающим и отображается там, где он расположен. Это значение по умолчанию. |
left |
Элемент становится плавающим и смещается по левому краю (остальные элементы обтекают его по правой стороне). |
right |
Элемент становится плавающим и смещается по правому краю (остальные элементы обтекают его по левой стороне). |
initial
|
Устанавливает свойство в значение по умолчанию. |
inherit
|
Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Нет.Анимируемое
Нет.Пример использования
HTML
<html>
<head>
<title>Свойство float.</title>
<style>
div {
width: 60%; /* задаём ширину блока */
text-align: justify; /* задаём выравнивание текста по ширине */
}
img.test1 {
width: 100px; /* задаём ширину изображения */
height: 100px; /* задаём высоту изображения */
float: left; /* Изображение становится плавающим элементом, смещенным влево */
}
img.test2 {
width: 150px; /* задаём ширину изображения */
height: 150px; /* задаём высоту изображения */
float: right; /* Изображение становится плавающим элементом, смещенным вправо */
}
</style>
</head>
<body>
<div>
<img src="nich.jpg" alt="nich" class="test1" />
<img src="nich.jpg" alt="nich" class="test2" />
<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
</div>
</body>
</html>
Свойство float.: попробуйте сами
index.html
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Свойство float.</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<img src="assets/nich.jpg" alt="nich" class="test1" />
<img src="assets/nich.jpg" alt="nich" class="test2" />
<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
</div>
</body>
</html>
style.css
CSS
div {
width: 60%;
text-align: justify;
}
img.test1 {
width: 100px;
height: 100px;
float: left;
}
img.test2 {
width: 150px;
height: 150px;
float: right;
}
Режим чтения
