Определение float
CSS свойство float определяет, должен ли элемент перемещаться влево, вправо или не должен перемещаться вообще.
Примечание: Абсолютно позиционированные элементы игнорируются CSS свойство float!
Примечание: Элементы, расположенные рядом с плавающим элементом, будут обтекать его. Чтобы избежать этого, используйте свойство clear или clearfix hack (смотрите пример внизу этой страницы).
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.cssFloat="left" Попробуй |
Поддержка float
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Синтаксис float
float: none|left|right|initial|inherit;
Значения float
| Значение | Описание | Демонстрация |
|---|---|---|
| none | Элемент не плавает (будет отображаться только там, где он встречается в тексте). Это значение по умолчанию | Демо ❯ |
| left | Элемент плавает слева от своего контейнера | Демо ❯ |
| right | Элемент перемещается справа от своего контейнера | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры float
Пусть изображение отображается только там, где оно встречается в тексте (float: none):
img
{
float: none;
}
Попробуйте сами »
Переместите первую букву абзаца влево и оформите букву в стиле:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Попробуйте сами »
Используйте float со списком гиперссылок для создания горизонтального меню:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Попробуйте сами »
Используйте float для создания домашней страницы с верхним и нижним колонтитулами, левым содержимым и основным контентом:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Попробуйте сами »
Не допускайте размещения плавающих элементов слева или справа от указанного элемента <p>:
img {
float: left;
}
p.clear {
clear: both;
}
Попробуйте сами »
Если плавающий элемент выше содержащего элемента, он выйдет за пределы своего контейнера. Это можно исправить с помощью "clearfix hack":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Попробуйте сами »
Страницы по теме float
CSS Учебник: CSS Поплавок
HTML DOM справочник: cssFloat свойство