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-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.