float

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

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам (за исключением абсолютно позиционированных)
Анимируется Нет

Синтаксис

float: left | right | none

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
img {
  float: none;
}

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <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>

Результат данного примера показан на рис. 1.

Применение свойства float

Рис. 1. Применение свойства float

Объектная модель

Объект.style.cssFloat

Примечание

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трёхпиксельный баг») в направлении, заданном значением float.

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

Спецификация Статус
CSS Basic Box Model Редакторский черновик
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Браузеры

6 4 12 1 7 1 1
1 1 6 1
Форматирование