smsc banner 468x60smsc banner 728x90smsc banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

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

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

skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…
Подробнее