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

Это применимо только к элементам, которые не являются абсолютно позиционированными. Любой элемент, следующий за элементом float, будет обтекать плавающий элемент по другой стороне.

Свойство float может иметь следующие значения:

Значение Описание
left Элемент «прилипает» к левой стороне родительского блока, весь контент обтекает этот блок с правой стороны.
right Противоположно свойству left — элемент «прилипает» к правой стороне родительского блока, весь контент обтекает этот блок с левой стороны.
none Обтекание не применяется. Это значение установлено по умолчанию.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента float.

Как работает свойство float

Плавающий элемент извлекается из нормального потока и смещается влево или вправо, насколько это возможно, в доступном пространстве вмещающего элемента.

Другие элементы обычно обтекают всплывающие предметы, если они не защищены от этого свойством clear. Элементы «плавают» горизонтально; это означает, что элемент может перемещаться только влево или вправо, а не вверх или вниз.

img {
    float: left;
}

Если несколько плавающих (floated) элементов расположены рядом, они будут «плавать» рядом друг с другом, если есть горизонтальное пространство. Если для одного или нескольких из них недостаточно места, они смещаются вниз до тех пор, пока либо не уместятся, либо не останется больше «плавающих» элементов.

.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}

Отключение float с использованием свойства clear

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

.clear {
    clear: left;
}

Это свойство может очищать элемент от обтекания элементами в одном контейнере. Оно не очищает элемент от обтекания дочерними блоками внутри самого элемента. Чтобы узнать больше об этом свойстве, см. Руководство по выравниванию элементов в CSS

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.