Общие свойства. Обтекание текстом
CSS позволяет использовать для позиционирования и оформления изображений общие свойства, в первую очередь следующие:
border - для обрамления изображений;
padding - для создания пространства между изображением и его рамкой;
float - для выравнивания изображения по левому или правому краю контейнера (при этом текст обтекает изображение с другой свободной стороны и под ним);
margin - отступ от соседних элементов страницы.
Рассмотрим свойство float (в отличие от остальных общих свойств, оно обычно применяется к изображениям с несколько другой целью по сравнению с другими элементами). Именно для создания такого эффекта как обтекание изображения текстом это свойство главным образом и предназначалось - затем его стали применять для многоколоночной вёрстки.
Сам принцип обтекания достаточно очевиден: нужно просто назначить изображению свойство float:left или float:right при помощи стиля. Сложнее разобраться в сопутствующих эффектах. Во-первых, как правило, изображению в этом случае следует назначать отступ с примыкающей к тексту стороны. Во-вторых, обтекание всегда необходимо вовремя останавливать: иначе изображение будет обтекаться не только последующим текстом, но и последующими изображениями. Следует назначать значение clear:both элементам, которые уже не должны обтекать изображения. И, наконец, контейнеры, содержащие плавающие элементы имеют неприятную особенность неправильно определять собственную высоту (не учитывается высота плавающего элемента). Противодействие существует: свойство overflow: hidden, применённое к контейнеру плавающего элемента, труднообъяснимым образом решает эту проблему.
.left {
float: left;
margin-right: 8px;
}
.right {
float: right;
margin-left: 8px;
}
div {
margin: 8px 0;
overflow: hidden;
}
p {
margin: 0;
}
...
<div>
<img class="left" src="flower1.jpg" alt="flower" />
<p>
Этот текст обтекает изображение, т.е. занимает свободное пространство
сбоку и снизу от него. При помощи CSS данный эффект достигается за счёт
применения к обтекаемому объекту свойства float со значением left или
right. Обычно при этом указывают ещё и отступ (margin).
</p>
</div>
<div>
<img class="right" src="flower2.jpg" alt="flower" />
<p>
Изображения вместе с текстом заключены в данном примере в секции, которым
назначен небольшой вертикальный отступ (margin: 8px 0). Свойство clear:both
назначать здесь нет необходимости, поскольку секция стремится занять 100%
ширины своего контейнера, и не станет обтекать другие элементы (если её
ширину специально не ограничить). Контейнеры, содержащие плавающие элементы
имеют неприятную особенность неправильно определять собственную высоту
(не учитывается высота плавающего элемента). В качестве противодействия
элементам div в данном примере назначено стилевое свойство overflow: hidden,
которое решает эту проблему.
</p>
</div>
Листинг 8.2. Обтекание изображений текстом (html, txt)
Рис. 8.2. Обтекание изображений текстом
Упражнение. Сделайте, чтобы оба изображения размещались слева. Проверьте, что будет, если: а) убрать свойство clear у div; убрать там же свойство overflow; в) убрать сброс отступов у параграфов. Каким образом эти свойства влияют на отображение страницы?