Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору img. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
В примере 1 введён стилевой класс float-right, при добавлении его к <img> изображение своей правой стороной прижимается к правому краю веб-страницы, а текст обтекает картинку по другим сторонам.
Пример 1. Обтекание картинки
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Обтекание</title>
<style>
.float-right {
width: 160px; /* Ширина картинки */
float: right; /* Выравнивание по правому краю */
margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
}
</style>
</head>
<body>
<h2>Глава седьмая, в которой пьют чай как ненормальные</h2>
<p><img src="image/mad-hatter.webp" alt="" class="float-right">
Возле дома под деревом был накрыт к чаю стол; Шляпа и Заяц пили чай,
а между ними помещалась на стуле Садовая Соня — хорошенький маленький зверек
вроде белочки. Она крепко спала; Шляпа и Заяц облокачивались на неё, как на
подушку, и разговаривали через её голову.<br>
«Бедная Соня, — первым делом подумала Алиса, — ей, наверное, очень
неудобно! Хотя раз она так крепко спит, то, значит, не сердится».
Ещё она заметила, что, хотя стол был очень большой и весь уставлен
посудой, вся троица теснилась в уголке, на самом краю.<br>
— Мест нет! Мест нет! — дружно закричали Заяц и Шляпа, как только
заметили Алису.<br>
— Места сколько хочешь! — возмутилась Алиса. И она уселась в
свободное кресло на другом конце стола.<br>
— Не хочешь ли торта? — любезно предложил Заяц.<br>
Алиса оглядела весь стол, но там ничего не было, кроме чайников и
чайной посуды.<br>
— Какого торта? Что-то я его не вижу, — сказала она.<br>
— Его тут и нет, — подтвердил Заяц.<br>
— Зачем же предлагать? Это не очень-то вежливо! — обиженно сказала
Алиса.<br>
— А зачем садиться за стол без приглашения? Это не очень-то вежливо!
— откликнулся, как эхо, Заяц.<br>
— Я не знала, что это ваш стол, — объяснила Алиса. — Я думала, он
накрыт для всех, а не для вас троих!<br>
— Не мешало бы тебе постричься, — неожиданно сказал Шляпа.<br>
Это были первые его слова, хотя все это время он рассматривал Алису
с большим любопытством.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Текст с иллюстрацией
Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введено свойство margin, которое добавляет пространство между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от изображений.