Основы работы с XHTML и CSS
Свойство clear
Хотя любой вводимый после плавающего изображения текст обтекает изображение, иногда такое поведение может оказаться ненужным. Например, следующий вывод содержит изображение книги и заголовок, который обтекает изображение справа; однако следующий параграф, вместо обтекания изображения, появляется ниже изображения.
Это изображение с заголовком, где изображение смещается влево, а заголовок обтекает его справа.
увеличить изображение
Рис. 5.15. Плавающее изображение с параграфом, выводимым ниже изображения
Код, создающий этот вывод, показан ниже.
<p>Это изображение с заголовком, где изображение смещается влево, а заголовок обтекает его справа. </p>
<div> <img src="book.gif" alt="Изображение книги" style="float:left; margin-right:10px; margin-bottom:10px"/> <b>Figure 1.</b><br/> <i>The Passion of the Western Mindv/i>. </div>
<p style="clear:left">Этот параграф выводится ниже изображения, а не обтекает его ниже заголовка.</p>
Листинг 5.6. Код вывода параграфа текста, использующего свойство clear для левого поля (html, txt)
Можно убедиться, что элемент страницы всегда появляется у левого или правого поля страницы, если ему присваивается свойство стиля clear. Значением этого свойства может быть left, right, both или none (по умолчанию).
| clear | left right both none (по умолчанию) |
В предыдущем примере следующему после изображения параграфу задается линейный стиль clear:left. Это означает, что параграф выводится на следующей доступной строке, у которой "очищено" ("clear") левое поле. Поэтому параграф начинается на строке, расположенной сразу под изображением, на первой строке, левое поле которой не занято другим элементом.
Всякий раз, когда элемент страницы смещается влево или вправо, может потребоваться вывод последующего текстового или графического элемента ниже плавающего элемента, а не как часть обтекающего содержимого. Значение свойства clear, присваиваемое этому необтекающему элементу, зависит от положения поля (left или right) плавающего элемента. Настройка clear:both обеспечивает, что ни одно поле не занято элементом страницы перед выводом оформленного так элемента.
