Свойство CSS float
Свойство float задаёт, как элемент обтекается внутри своего контейнера. Оно размещает элемент слева или справа, позволяя тексту и строчным элементам обтекать его.
Оно может принимать следующие значения:
left— элемент прижимается к левому краю контейнера.right— элемент прижимается к правому краю контейнера.none— значение по умолчанию. Элемент не обтекается и остаётся там, где находится в тексте.inherit— элемент наследует значение float от родителя.
Совет: Свойство float часто используется для обтекания изображений текстом.
Пример CSS float: right
float: right прижимает элемент к правому краю контейнера.
Совет: Уменьшите окно, чтобы увидеть, как текст обтекает плавающий элемент.
Пример
Блок прижат к правому краю, а текст обтекает его с левой стороны.
<style> сделайте цветной блок (заменяющий изображение) плавающим справа с левым отступом. Добавьте абзац текста, обтекающий его слева.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: right;
width: 170px;
height: 170px;
background-color: #4CAF50;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. The box floats to the right and the text wraps around it. Make the window smaller to see the wrapping change.</p>
</body>
</html>
Пример CSS float: left
float: left прижимает элемент к левому краю контейнера.
Пример
Блок прижат к левому краю, а текст обтекает его с правой стороны.
<style> сделайте цветной блок (заменяющий изображение) плавающим слева с правым отступом. Добавьте абзац текста, обтекающий его справа.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: left;
width: 170px;
height: 170px;
background-color: #4CAF50;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. The box floats to the left and the text wraps around it. Make the window smaller to see the wrapping change.</p>
</body>
</html>
Пример CSS float: none
float: none означает, что элемент не обтекается и остаётся в обычном потоке.
Пример
Блок остаётся в обычном потоке, и текст его не обтекает.
<style> установите цветной блок (заменяющий изображение) на float none. Добавьте абзац; текст не обтекает блок.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imgbox {
float: none;
width: 170px;
height: 170px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="imgbox"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. With float: none the box stays in the normal flow and the text does not wrap around it.</p>
</body>
</html>
CSS Float: элементы рядом друг с другом
Если несколько элементов прижать к левому краю, они выстраиваются рядом друг с другом.
Пример
Три цветных div прижаты к левому краю, поэтому располагаются бок о бок.
<style> сделайте элементы div плавающими слева с отступом 15px, и задайте .div1 красный фон, .div2 жёлтый, а .div3 зелёный. Добавьте три div, чтобы они располагались рядом.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>