Часто при верстке страниц необходимо решить задачу обтекания текстом картинки.
Для решения этой задачи средствами CSS необходимо присвоить картинке класс и указать для этого класса стилевое свойство float. Использование значения left - выравнивает изображение по левому краю. Значение right - по правому краю.
Обтекание текста картинкой происходит вплотную к картинке, что не совсем красиво. Чтобы это исправить, необходимо также применить свойство margin, которое добавит отступ между текстом и картинкой.

Рассмотрим пример:

СSS-код:

.img {
	float: left;
	margin: 10px 10px 10px 0px;
}

HTML-код:


 

Текст, который обтекается картинкой, которая находится слева от текста. Отступ, между картинкой и текстом указан в размере 10px.

Результат примера:

Текст, который обтекается картинкой, которая находится слева от текста. Отступ, между картинкой и текстом указан в размере 10px.