| Я новичок. Хочу разобраться в web-разработке |
Преподаватель
Вы можете этот курс.
Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный
Лекция 35:
Плавающие элементы и очистка
Как работают плавающие элементы?
Теперь, познакомившись с основами теории, давайте перейдем к рассмотрению синтаксиса плавающих элементов и очистки, и рассмотрим несколько примеров.
Свойство float имеет четыре допустимых значения: left, right, none и inherit. Первые два используются значительно чаще и будут заставлять бокс смещаться влево или вправо. Объявление float:none, которое используется по умолчанию, обычно объявляется только для "отмены" объявления в некотором другом правиле. float:inherit используется очень редко и существует скорее просто для единообразия. Оно заставляет элемент наследовать значение float от элемента предка.
Плавающий бокс исключается из потока документа и смещается как можно дальше влево или вправо, в зависимости от указанного направления смещения. "Как можно дальше" обычно означает, пока внешний край плавающего элемента не коснется края содержащего его блока (внутреннего края его заполнения, если имеется). Таким образом, для float:left бокс смещается влево, пока левое поле плавающего элемента не коснется левого края предка.
Внимательный читатель мог заметить, что выше было сказано "обычно". Если уже имеется бокс, смещенный влево, когда мы смещаем другой бокс в том же направлении, то второй бокс остановится, когда коснется первого бокса. Другими словами, плавающие элементы не накладываются друг на друга.
Пришло время посмотреть на плавающие элементы в действии, поэтому приготовьте текстовый редактор.
1. Создайте новый файл, скопируйте в него приведенный ниже код, и сохраните документ как float.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Floating</title>
</head>
<body>
<p id="p1" > <span id="span-a" >Lorem ipsum</span>
<span id="span-b" >dolor sit amet</span>
<span id="span-c" >consectetuer</span> adipiscing elit.
Curabitur feugiat feugiat purus.
Aenean eu metus. Nulla facilisi.
Pellentesque quis justo vel massa suscipit sagittis.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut tincidunt metus arcu vel lorem.
Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.
Sed sagittis, metus a semper dictum, sem libero sagittis nunc, vitae adipiscing leo neque vitae tellus.
Duis quis orci quis nisl nonummy dapibus.
Etiam ante. Phasellus imperdiet arcu at odio.
In hac habitasse platea dictumst. Aenean metus.
Quisque a nibh. Morbi mattis ullamcorper ipsum.
Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.
Proin lectus purus, vehicula et, cursus ut, nonummy et, diam. </p>
<p id="p2" >Nunc ac elit. Vestibulum placerat dictum nibh. Proin massa.
Curabitur at lectus egestas quam interdum mollis.
Cras id velit a lacus sollicitudin faucibus.
Proin at ante id nisi porttitor scelerisque.
In metus. Aenean nonummy semper enim.
Aenean tristique neque quis arcu tincidunt auctor.
Fusce consequat auctor ligula.
Fusce nulla lorem, sagittis a, lacinia et, nonummy in, eros.
In nisi augue, aliquam eget, convallis vel, malesuada quis, libero. </p>
<p id="p3" >Hello, World! </p>
</body>
</html>Файл содержит много контента, но он нам понадобится, чтобы показать, как все работает.
2. Откройте документ в Web-браузере, чтобы увидеть, как он выглядит. Скучновато, не правда ли?
3. Создайте другой документ в текстовом редакторе, введите в него представленный ниже код, и сохраните как style.css в том же каталоге, что и файл HTML шага 1.
#span-a {
float: left;
background-color: #cfc;
color: #030;
}4. Соедините таблицу стилей с документом HTML, вставляя следующую строку сразу перед тегом </head>:
<link rel="stylesheet" type="text/css" href="style.css" >
5. Сохраните и обновите страницу в браузере. Вы увидите теперь элемент span, содержащий слова "Lorem ipsum", смещенный влево. Я задал для него также светло-зеленый фон, чтобы слегка его выделить.
6. По прежнему не так просто увидеть, что здесь происходит, поэтому давайте сделаем плавающий элемент немного больше. Добавьте следующее объявление в таблицу стилей:
#span-a {
float: left;
background-color: #cfc;
color: #030;
padding: 1em;
}7. Сохраните и обновите страницу, и вы увидите, что зеленая область стала теперь больше, так как мы добавили небольшое заполнение на всех четырех сторонах бокса. Плавающий элемент занимает в высоту три строки текста и можно ясно видеть, что другой текст обтекает плавающий элемент.
Детали
Теперь мы рассмотрим, что здесь происходит более подробно. Плавающий бокс, сгенерированный первым элементом span, был смещен влево, до самого края документа, а линейные боксы, смежные с ним, были укорочены. Хотя это не совсем еще видно, но блочный бокс, сгенерированный параграфом, который содержит плавающий элемент, не затронут. Давайте выделим параграф, чтобы сделать это более заметным.
1. Добавьте еще одно правило CSS в таблицу стилей следующим образом:
p {
border: 1px solid #f00;
}2. Снова сохраните файл CSS и обновите окно браузера. Вы должны теперь увидеть красную границу вокруг каждого параграфа - обратите внимание, что плавающий элемент расположен внутри одного из параграфов.
3. Давайте модифицируем последнее правило, чтобы проверить, что плавающие элементы останавливаются на внутреннем крае области заполнения предка:
p {
border: 1px solid #f00;
padding: 1em;
background-color: #ff9;
}4. Сохраните и обновите, и вы увидите доказательство того, что было сказано ранее: плавающий бокс смещается до края содержащего его блока, в то время как заполнение предка находится вне его. Вы увидите также, что желтый фон параграфа распространяется под плавающим боксом. Плавающий бокс потомок очевидно не влияет на бокс параграфа, только на линейные боксы внутри.
5. Давайте поэкспериментируем еще - что произойдет, если плавающий элемент будет выше чем его предок? Модифицируем правило для плавающего элемента следующим образом:
#span-a {
float: left;
background-color: #cfc;
color: #030;
padding: 1em 1em 10em;
}
Примечание: Если вы используете более узкое окно браузера, то может понадобиться использовать для нижнего заполнения значение больше 10em, чтобы зеленая область распространилась за пределы нижней границы параграфа.
Теперь вы видите что-то интересное: плавающий бокс высовывается наружу из блока предка; бокс предок не расширяется, чтобы охватить свой плавающий бокс потомок. Можно также видеть (если используется достаточно большое нижнее заполнение), что линейные боксы, смежные с плавающим элементом во втором параграфе, укорачиваются.
Анатолий Федоров
| Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989 |