CSS Float

Свойство CSS float является свойством позиционирования . Он используется для перемещения элемента влево или вправо , позволяя другому элементу обернуться вокруг него. Обычно используется с изображениями и макетами.

Как это работает

Элементы перемещаются только горизонтально. Таким образом, можно перемещать элементы только влево или вправо, но не вверх или вниз.

1. Плавающий элемент может быть перемещен как можно дальше влево или вправо. Проще говоря, это означает, что плавающий элемент может отображаться в крайнем левом или крайнем правом углу.
2. Элементы после плавающего элемента будут обтекать его.
3. Элементы перед плавающим элементом не будут затронуты.
4. Если изображение плыло вправо, текст обтекал его слева, а если изображение плыло влево, текст обтекал его справа.

свойства Float

clear
Свойство clear используется, чтобы избежать элементов после плавающих элементов, которые обтекают его.
float
Он указывает, должен ли блок плавать или нет.

значения свойства Float

none
Он указывает, что элемент не является плавающим и будет отображаться только там, где он встречается в тексте. это значение по умолчанию.
left
Он используется для перемещения элемента влево.
right
Он используется для перемещения элемента вправо.
initial
Он устанавливает свойство в его начальное значение.
inherit
Он используется для наследования этого свойства от родительского элемента.

Пример свойства Float

Давайте рассмотрим простой пример, чтобы понять свойство CSSfloat.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>Следующий абзац содержит изображение со стилем
<b>float:right</b>.В результате изображение будет перемещаться вправо в абзаце.</p>
<p><img src="image.jpg" alt="картинка" />
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
Это какой-то текст. Это какой-то текст. Это какой-то текст.
</p>
</body>
</html>

Обсуждение закрыто.