Как реализовать в html обтекание картинки текстом

Часто картинку на сайт нужно вставить так, чтобы текст обтекал ее слева и справа. Такой подход можно увидеть на многих новостных и информационных сайтах, когда маленькую по ширине картинку уместно поставить сбоку. Давайте посмотрим, как это правильно делать.

Как сделать обтекание текстом картинки в html

Как вы должны знать, изображение вставляется на веб-страницу с помощью тега img. У него есть один обязательный атрибут – “src”(source), который задает путь до картинки. Что будет, если мы просто вставим изображение рядом с текстом? Смотрите скриншот.

Как видно, сбоку осталось много неиспользованного места, но сейчас мы это исправим. Обтекание картинки (да и вообще любого другого элемента) задается в css. Для этого есть свойство float. По сути, у свойства есть два значения, которые нам сейчас интересны:
Left – элемент прижимается к левому краю, все остальные элементы и текст обтекают его справа.
Right – прижимается к правому краю.

Отлично, давайте попробуем на практике. Поскольку в нашем примере всего одно изображение, то в css можно обратиться к нему по селектору img. На реальном сайте так делать, конечно, не стоит, потому что правило обтекания применится ко всем картинкам.

Результат:

Ну так-то оно получше, правда? Пока текст располагается очень близко к изображению, но это исправляется заданием внутренних или внешних отступов картинке.

Соответственно, справа картинку можно расположить так:

Вот, собственно, и весь секрет обтекания изображений текстом. Именно таким в статьях изображения прижимаются к левому или правому краю, а свободное место занимает текстовая информация.

Отмена обтекания

Для отмены этого свойства прописывается float: none. После этого элемент начинает вести себя по обычным правилам. Свойство float уже давно введено в css и его использование является абсолютно правильным с точки зрения веб-стандартов. Плавающие блоки (float) поддерживаются во всех браузерах, которые сегодня используются.

Теперь при необходимости вы сможете сделать в html обтекание картинки текстом. Ну или хотя бы будете знать о том, как это работает и что вся суть в css свойстве float.