СSS Свойство float
Определение и использование
Свойство float указывает, как элемент должен плавать.
Примечание: Абсолютно позиционированные элементы игнорирует свойство float!
Примечание: Элементы после плавающего элемента будут обтекать его. Чтобы избежать этого, используйте clear или clearfix взломать (см. пример в нижней части этой страницы).
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | 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 |
Примеры
Пример
Пусть изображение отображается только там, где оно встречается в тексте (float: none):
img
{
float: none;
}
Попробуйте сами »
Пример
Пусть первая буква параграфа плавает влево и стиль буквы:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Попробуйте сами »
Пример
Использовать поплавок со списком гиперссылок для создания горизонтального меню:
.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%;}
Попробуйте сами »
Пример
Использовать поплавок, чтобы создать домашнюю страницу с заголовка, нижнего колонтитула, слева содержание и основное содержание:
.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" взлома:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Поплавок
HTML DOM Справочник: Свойство cssFloat
