Свойство clear управляет поведением последовательностью всплывающих элементов документа.
По умолчанию последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Посмотрите на предыдущий пример, где текст автоматически смещается вверх вдоль изображения Била Гейтса.
Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Резюме
Поплавки можно использовать в разных ситуациях, часто - одновременно с позиционированием. В следующем уроке мы разберём, как позиционировать бокс, относительно или абсолютно.
