Учебник HTML 

Урок 14. Поплавки (продолжение)

В этом уроке мы разберем свойство "clear", управляющее всплывающими элементами.

По умолчанию, элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Свойство "clear" может иметь значения left, right, both или none. Принцип такой: если "clear", например, имеет для бокса значение "both", то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.

Не очень понятно? Смотрим пример:

<---div id="image">
<---img src="logo.jpg"
<---/div>
 
<---h1>Logo<---/h1>
<---p class="floatstop">Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст.<---/p>

Чтобы не дать тексту всплывать вверх перед рисунком, как это было в аналогичном примере прошлого урока, мы можем добавить такой код CSS:

#image {
float:left;
width: 300px;
}
.floatstop {
clear:both;
}

А теперь смотрим, как это будет выглядеть в браузере.

Все это довольно сложно, поэтому вам просто необходимо как следует потренироваться с "поплавками". Меняйте значения, экспериментируйте. Ваша задача понять как это работает. Если вы поймете, то легко сможете применять на практике.

Удачи! Встретимся в следующем уроке.

См. также

• Следующий урок: Позиционирование элементов.
• Предыдущий урок: Создаем "поплавки"