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

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

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

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

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

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

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

img {
    float: left;
}

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

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

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

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

.clear {
    clear: left;
}