float

Элемент с плавающим расположением — это элемент, у которого вычисленное значение float не равно none.

Так как float подразумевает использование блочного макета, в некоторых случаях оно изменяет вычисленное значение свойств display:

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

Свойство float задаётся одним ключевым словом из списка значений ниже.

left

Элемент должен быть слева от содержащего блока.

right

Элемент должен быть справа от содержащего блока.

none

Элемент не должен плавать.

inline-start

Элемент должен плавать со стороны начала содержащего блока. Это левая сторона с ltr скриптами, и правая сторона с rtl скриптами.

inline-end

Элемент должен плавать со стороны конца содержащего блока. Это правая сторона с ltr скриптами, и левая сторона с rtl скриптами.

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )  

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

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

Элемент с плавающим расположением имеет высоту не меньше, чем высота самого высокого вложенного плавающего дочернего элемента. Мы задали родительскому элементу width: 100% и заставили его плавать, чтобы он был достаточно высоким для охватывания всех плавающих дочерних элементов и занимал всю ширину родительского элемента, чтобы не приходилось очищать его смежный соседний элемент.

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>

CSS

section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

Результат

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

• Блочный контекст форматирования
• Используйте clear для того, чтобы заставить элемент перемещаться ниже плавающего элемента.