Свойство CSS `float`

Свойство float CSS размещает элемент у левого или правого края контейнера, позволяя тексту и строчным элементам обтекать его. Элемент исключается из нормального потока страницы, но при этом остаётся частью потока (в отличие от абсолютного позиционирования).

Попробуйте

float: none;

float: left;

float: right;

float: inline-start;

float: inline-end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Float me</div>
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  width: 80%;
  line-height: normal;
}

#example-element {
  border: solid 10px #efac09;
  background-color: #040d46;
  color: white;
  padding: 1em;
  width: 40%;
}

Плавающий элемент — это элемент, вычисленное значение свойства которого 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;

Значения

Это свойство задаётся одним из следующих ключевых слов:

left

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

right

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

none

Элемент не должен обтекаться.

inline-start

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

inline-end

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

Формальное определение

Формальный синтаксис

float = 
  left |
  right |
  none |
  inline-start |
  inline-end

Примеры

Как позиционируются плавающие элементы

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

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

Высота плавающего элемента не меньше высоты самого высокого из его вложенных плавающих дочерних элементов. Мы задали родительскому элементу 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, чтобы принудительно переместить элемент ниже плавающего элемента.