Описание 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. Перенос блока на другую строку

Перейти к заданиям

Описание float 1

Создайте веб-страницу, как показано на рис. 1. Каждая строка является ссылкой целиком, звёздочка — обычный текстовый символ — ★. Вид в разных браузерах может незначительно отличаться.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рецепты</title>
  <style>
   h2 { color: #a1bd57; }
   ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
   }
   li {
    margin-bottom: 3px;
   }
   li span {
    float: right;
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e6e1d7;
    text-align: center;
    line-height: 20px;
   }
   a {
    color: #a58039;
    display: block; 
    text-decoration: none;
   }
   a::before {
    content: '★';
    color: #a44823;
    margin-right: 5px;
   }
  </style>
 </head>
 <body>
  <h2>Рецепты</h2>
  <ul>
   <li><a href="#"><span>10</span>Салаты</a></li>
   <li><a href="#"><span>12</span>Курица</a></li>
   <li><a href="#"><span>8</span>Рыба</a></li>
   <li><a href="#"><span>6</span>Десерт</a></li>
   <li><a href="#"><span>16</span>Выпечка</a></li>
  </ul>
 </body>
</html>

Описание float 2

Создайте веб-страницу, как показано на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стр. 1 из 4</title>
  <style>
   .page { 
    color: #656565; 
    padding-top: 6px;
   }
   ul {
    list-style: none;
    margin: 0;
    float: right;
   }
   li {
    float: left;
    margin-left: 3px;
   }
   a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    background: #ebe8df;
    color: #aa8845;
    border: 1px solid #dad6cf;
   }
   a.active {
    background: #a44823;
    color: #fff;
    border-color: #7b3418;
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="#" class="active">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
  </ul>
  <p class="page">Стр. 1 из 4</p>
 </body>
</html>

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

Автор: Влад Мержевич
Последнее изменение: 16.08.2017
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid