Online-учебник по CSS

Автор учебника: Евгений Андросов


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


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

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

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

<div id="image">
<img src="flower.jpg"
</div>
 
<h1>Роза</h1>
<p class="floatstop">Ро?за — принятое в декоративном цветоводстве название культурных форм растений, относящихся к роду Шиповник (лат. Rosa) семейства Розовые.
Дикие растения произрастают, в основном, в умеренном климате. Всего насчитывается около 300—400 видов дикой розы. Растения обычно имеют форму куста или лианы.
В классическом изображении роза имеет 32 лепестка, отсюда название роза ветров.
Роза на сегодняшний день — самый покупаемый цветок в мире.</p>

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

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

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

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

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


Предыдущий урок    | К началу урока | К оглавлению |     Следующий урок




Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментариев к этому уроку пока нет


Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.


Введите число, которое вы видите на картинке