CSS стиль float
Стиль float определяет, по какой стороне будет выравниваться элемент. Все остальные элементы при этом будут обтекать его с других сторон.
Если float: none
, то элемент выводится на странице как обычно. Допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Краткая информация по CSS-свойству float
Значение по умолчанию | none |
Наследуется | Нет |
Применяется | Ко всем элементам (кроме абсолютно позиционированных) |
Правила написания свойства float
float: left | right | none
left
- выравнивает элемент по левому краю. Все остальные элементы будут обтекать его по правой стороне.
right
- выравнивает элемент по правому краю. Все остальные элементы будут обтекать его по левой стороне.
none
- у элемента отсутствует обтекание.
Объектная модель
Объект.style.float
Пример применения стиля float
Выравниваем изображение с елочкой по левому краю с помощью float: left;
.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля float</title>
<style>
figure {
float: left;
padding-right: 10px;
}
</style>
</head>
<body>
<figure>
<img src="fir-tree.jpg" alt="Елка">
</fiqure>
<p>Обтекание изображения по правому краю</p>
</body>
</html>
Ссылки по теме: