float¶

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

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

Позиционирование

Синтаксис¶

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start; /* Только Firefox 55+ */
float: inline-end; /* Только Firefox 55+ */

/* Global values */
float: inherit;
float: initial;
float: unset;

Значения¶

left: Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right: Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none: Обтекание элемента не задаётся.

Значение по-умолчанию:

float: none;

Применяется к: Ко всем элементам (за исключением абсолютно позиционированных)

Спецификации¶

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>float</title>
    <style>
      .pull-left {
        float: left; /* Обтекание блока по правому краю */
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="pull-left">
      <img src="image/figure.jpg" alt="" />
    </div>
    <p>
      Бихевиоризм, как бы это ни казалось парадоксальным,
      просветляет сублимированный стимул, так, например,
      Ричард Бендлер для построения эффективных состояний
      использовал изменение субмодальностей.
    </p>
  </body>
</html>