Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

float

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

Если к элементу применяется свойство float, то он ведет себя следующим образом:

Изменение типа элемента в зависимости от значения float.
Элемент не всплывает или float: nonefloat: left или right
inline-tabletable
inline, run-in, inline-block, table-caption, table-column-group, table-column, table-header-group, table-footer-group, table-row-group, table-row, table-cellblock
block, table, list-item, noneбез изменений

Ниже представлено два изображения с четырьмя блоками. У блоков не задан фоновый цвет. На втором изображении блок с зеленой рамкой всплывает влево.

Нормальное расположение блоков.

Изображение с нормальным расположением блоков

Всплытие одного из блоков (зеленого).

Изображение, где один из блоков всплывает влево

Тип свойства

Назначение: форматирование.

Применяется: ко всем элементам. Но, если у элемента установлено свойство display со значением none или он абсолютно позиционируется (свойство position), то значение float будет проигнорировано.

Наследуется: нет.

Значения

Значением свойства float является одно из ключевых слов задающих выравнивание.

Процентная запись: не существует.

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

Синтаксис

float: left | right | none | inherit

Пример CSS: использование float

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство float</title>
  <style type="text/css">
   body {
    color: white; /* цвет текста на странице */
   }
   #flo {
    background: green; /* зеленый фон плавающего SPAN */
    float:left; /* элемент всплывает влево */
    width: 150px; /* ширина элемента */
    height: 120px; /* высота */
    margin-right: 10px; /* внешнее поле справа */
   }
   .text {
    background: red; /* красный фон обычного SPAN */
   }
   .block {
    background: blue; /* синий фон параграфов */
   }
  </style>
 </head>
 <body>
  <div>
   <span id="flo">Этот SPAN всплывает влево.</span>
   <span class="text">Текст после всплывающего SPAN.</span>
   <p class="block">Параграф расположенный ниже.</p>
   <p class="block">Еще один параграф расположенный ниже.</p>
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS float.

Использование свойства CSS float

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

IE 6.0 допускает довольно много ошибок при использовании float. Например, содержимое, обтекающее плавающий элемент, может ни с того ни с чего исчезнуть со страницы, но если окно браузера свернуть и развернуть — оно появится. Этот браузер всегда добавляет к выравниваемому элементу внешнее поле (margin) размером в 3px со стороны противоположной всплытию, причем его никак нельзя убрать. Если же понадобится создать внешнее поле, наоборот, с другой стороны, между краем родительского блока и всплывающим элементом, то IE 6.0 его удвоит. И это далеко не все баги.

Большинство проблем с IE 6.0 может решить применение к плавающему элементу свойства displayinline. Причем он не станет встроенным, ведь float делает его блочным.