Плавающее свойство CSS
Пример
Пусть изображение плавает вправо:
img
{
float: right;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство float
указывает, должен ли элемент перемещаться влево, вправо или вообще не перемещаться.
Примечание. Абсолютно позиционированные элементы игнорируют это float
свойство!
Примечание. Элементы рядом с плавающим элементом будут обтекать его. Чтобы избежать этого, используйте свойство clear или хак clearfix (см. пример внизу этой страницы).
Значение по умолчанию: | никто |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS1 |
Синтаксис JavaScript: | объект .style.cssFloat="левый" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Синтаксис CSS
float: none|left|right|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Пусть изображение плавает влево:
img
{
float: left;
}
Пример
Пусть изображение будет отображаться именно там, где оно встречается в тексте (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;
}
Связанные страницы
Учебное пособие по CSS: CSS Float
Справочник по HTML DOM: свойство cssFloat