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

Создайте веб-страницу, как показано на рис. 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>

Создайте веб-страницу, как показано на рис. 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>

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

Автор: Влад Мержевич
Последнее изменение: 31.05.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты