CSS float Свойство
Пример
Пусть изображение поплавок вправо:
img
{
float: right;
}
Подробнее примеры ниже.
Определение и использование
Свойство float указывает, как элемент должен плавать.
Примечание: Абсолютно позиционированные элементы игнорируют свойство float!
Примечание: Элементы после плавающего элемента будет течь вокруг него. Чтобы избежать этого, используйте свойство clear или clearfix Hack (см. пример в нижней части этой страницы).
| Значение по умолчанию: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS1 |
| Синтаксис JavaScript: | object.style.cssFloat="left" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Синтаксис CSS
float: none|left|right|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| none | Элемент не плавает, (будет отображаться только там, где это происходит в тексте). Это значение по умолчанию | |
| left | Элемент плавает слева от контейнера | |
| right | Элемент плавает справа от контейнера | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Пусть изображение поплавок влево:
img
{
float: left;
}
Пример
Пусть изображение будет отображаться только там, где оно происходит в тексте (float: нет):
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;
}
Похожие страницы
CSS Справочник: CSS Плавать
HTML DOM Справочник: cssFloat Свойство