Описание float

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

У свойства float есть три значения: left, right и none. По умолчанию используется значение none, иными словами, float не применяется к элементу. В примере 1 показано добавление изображения и текста, как они отображаются исходно.

Пример 1. Исходное положение картинки с текстом

<p><img src="image/winnie.png">
 Винни-Пух был всегда не прочь немного подкрепиться, в
 особенности часов в одиннадцать утра, потому что в это время
 завтрак уже давно окончился, а обед ещё и не думал начинаться.
 И, конечно, он страшно обрадовался, увидев, что Кролик достаёт
 чашки и тарелки.</p>

Результат данного примера показан на рис. 1. Картинка и текст выравниваются по левому краю окна браузера, при этом первая строка текста располагается по нижнему краю изображения.

Исходное расположение картинки с текстом

Рис. 1. Исходное расположение картинки с текстом

Значение left у свойства float выравнивает картинку по левому краю браузера, а все остальные элементы, вроде текста, обтекают её по правой стороне (пример 2).

Пример 2. Значение left

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float: left</title>
  <style>
   .fig { float: left; }
  </style>
 </head>
 <body> 
  <p><img src="image/winnie.png" class="fig">
   Винни-Пух был всегда не прочь немного подкрепиться, в
   особенности часов в одиннадцать утра, потому что в это время
   завтрак уже давно окончился, а обед ещё и не думал начинаться.
   И, конечно, он страшно обрадовался, увидев, что Кролик достаёт
   чашки и тарелки.</p>
 </body>
</html>

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

Обтекание картинки текстом справа

Рис. 2. Обтекание картинки текстом справа

Значение right у свойства float располагает картинку по правому краю браузера, а все остальные элементы, вроде текста, обтекают её по левой стороне (пример 3). Текст при этом плотно прижимается к картинке, поэтому имеет смысл дополнить стиль свойством margin, которое добавит пространство между изображением и текстом.

Пример 3. Значение right

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float: right</title>
  <style>
   .fig { 
    float: right;
    margin: 0 0 10px 10px;
   }
  </style>
 </head>
 <body> 
  <p><img src="image/winnie.png" class="fig">
   Винни-Пух был всегда не прочь немного подкрепиться, в
   особенности часов в одиннадцать утра, потому что в это время
   завтрак уже давно окончился, а обед ещё и не думал начинаться.
   И, конечно, он страшно обрадовался, увидев, что Кролик достаёт
   чашки и тарелки.</p>
 </body>
</html>

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

Обтекание картинки текстом слева

Рис. 3. Обтекание картинки текстом слева

Особенности float

Элемент с float и со значением left или right превращается в блочный, к нему автоматически добавляется свойство display со значением block. При этом ширина элемента равна его содержимому плюс значения свойств padding, border и margin. В этом отношении элемент ведёт себя как строчно-блочный. В примере 4 показано, как выглядит ширина элемента.

Пример 4. Ширина элемента с float

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .frame { 
    float: right;
    background: #887dba; /* Цвет фона */
    color: #f5faf4; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    margin: 0 0 10px 10px; /* Отступы вокруг */
   }
  </style>
 </head>
 <body> 
  <div class="frame">Отрицательный интеграл Дирихле</div>
  <p>Интеграл от функции, обращающейся в бесконечность в 
   изолированной точке, общеизвестно, ускоряет абстрактный 
   двойной интеграл, явно демонстрируя всю чушь вышесказанного.</p>
 </body>
</html>

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

Ширина элемента

Рис. 4. Ширина элемента

Элементы с float располагаются друг с другом по горизонтали. При значении left это происходит слева направо, а при значении right — справа налево. В примере 5 показан порядок элементов, в зависимости от используемого значения float.

Пример 5. Порядок элементов

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   div {
    color: #f5faf4; /* Цвет текста */
    font-size: 2em; /* Размер шрифта */
    padding: 10px 20px; /* Поля вокруг текста */
    margin-bottom: 1em; /* Отступ снизу */
   }
   .ltr { 
    float: left;
    background: #69539c; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
   }
   .rtl { 
    float: right;
    background: #37673f; /* Цвет фона */
    margin-left: 10px; /* Отступ слева */
   }
  </style>
 </head>
 <body> 
  <div class="ltr">1</div><div class="ltr">2</div>
  <div class="ltr">3</div><div class="ltr">4</div>
  <div class="ltr">5</div><div class="ltr">6</div>
  <div class="rtl">1</div><div class="rtl">2</div>
  <div class="rtl">3</div><div class="rtl">4</div>
  <div class="rtl">5</div><div class="rtl">6</div>
 </body>
</html>

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

Порядок элементов

Рис. 5. Порядок элементов

Если близлежащему к обтекаемому элементу не хватает места по ширине, то он переносится на следующую строку. Это хорошо заметно на блоках, общая ширина которых превышает 100%. В примере 6 добавлено два блока, для которых задано свойство float со значением left, что обеспечивает их расположение рядом друг с другом по горизонтали. Ширина первого блока — 30%, второго — 70%. При этом к первому блоку справа добавляется линия толщиной два пикселя, из-за чего суммарная ширина блоков превышает ширину окна браузера (30% + 2px + 70%).

Пример 6. Перенос блока

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .col1, .col2 {
    float: left;
    min-height: 150px; /* Минимальная высота */
   }
   .col1 {
    background: #85ab70; /* Цвет фона */
    width: 30%; /* Ширина */
    border-right: 2px solid #ece190; /* Линия справа */
   }
   .col2 {
    background: #406325; /* Цвет фона */
    width: 70%; /* Ширина */
   }
  </style>
 </head>
 <body> 
  <div class="col1"></div>
  <div class="col2"></div>
 </body>
</html>

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

Перенос блока на другую строку

Рис. 6. Перенос блока на другую строку

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 16.08.2017
Редакторы: Влад Мержевич