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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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