CSS свойство float
The float CSS property defines if a box or an element should float or not. See examples and practice yourself.
Свойство float определяет, по какой стороне контейнера должны располагаться элементы, позволяя тексту или другим элементам обтекать их. Свойство имеет три значения: none, left и right.
Это свойство напрямую связано со свойством clear, которое определяет, должен ли элемент располагаться рядом с плавающими элементами или под ними (clear).
info
Свойство float будет проигнорировано, если элементы имеют абсолютное позиционирование (position: absolute).
| Начальное значение | none |
|---|---|
| Применяется к | Ко всем элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.cssFloat = "right"; |
Синтаксис
Синтаксис свойства CSS float
float: none | left | right | initial | inherit;Пример свойства float:
Пример свойства CSS float со значением right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Результат
В следующем примере изображение смещается влево.
Пример использования свойства float для смещения изображения:
Пример свойства CSS float со значением left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| none | Означает, что элемент не плавает и будет отображаться там, где он находится в тексте. Это значение по умолчанию для данного свойства. | Play it » |
| left | Означает, что элемент смещается влево. | Play it » |
| right | Означает, что элемент смещается вправо. | Play it » |
| initial | Заставляет свойство использовать значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова цель свойства 'float' в CSS?