Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
Вот что получаем:
Или такой вариант:
Атрибуты и значения
- align="top" – выравнивает картинку и текст по верху.
- align="middle" – выравнивает картинку и текст по центру, по вертикали.
- align="bottom" – выравнивает картинку и текст по низу.
Использован формат PNG (.png). Изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а __.png – полное имя файла самой картинки.