Запрет обтекания
Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон.
Значения:
both- Запрещает обтекание элемента с левой и правой стороны.
left- Запрещает обтекание элемента с левой стороны.
right- Запрещает обтекание элемента с правой стороны.
none- Запрет на обтекание элемента не задается.(по умолчанию)
Вот пример где clear отменяет действие float
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>clear</title> </head> <body> <div style="background:#cc0; width:150px; height: 50px; float:left;">Этот блок всплывает слева.</div> <div style="background:#c0c; width:150px; height: 100px; float:left;">И этот блок всплывает слева.</div> <div style="background:#0c0; width:300px; height: 80px; clear:left;">А этот блок отменяет обтекание с левой стороны.</div> </body></html>
Блочная вёрстка.
В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц (http://webremeslo.ru/html/glava4.html) и фреймов (http://webremeslo.ru/html/glava7.html), теперь имея накопленный багаж знаний, настало время познакомить Вас с блочной версткой сайта, используя блоки div и свойства CSS.
Разберём классический макет верстки сайта из трёх колонок, а так же "шапки" и "подвала".. в котором правая и левая колонки имеют фиксированную ширину, а центральная колонка "резиновая" т.е. занимает собой всё оставшееся место.
Взгляните на пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Блочная вёрстка</title> </head> <body style="background: #cc0; margin:0;"> <div style="clear:both; background: #0c0; padding: 5px;">Логотип</div> <div style="float: left; background: #c0c; padding: 5px; width: 170px">Меню</div> <div style="float: right; background: #c0c; padding: 5px; width: 170px">Реклама</div> <div style="margin:0 180px; background: #0cc; padding: 5px;">Основное содержание<br><br><br><br><br> И ещё куча текста..</div> <div style="clear:both; background: #0c0; padding: 5px;">Подвал</div> </body></html>
Что было понятно "расшифрую" каждую строчку из примера выше:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Блочная вёрстка</title> </head>
- Думаю понятно..:) стандартное начало любой страницы..
<body style="background: #cc0; margin:0;">
- Используем margin:0 для того чтобы обнулить поля в окне браузера.
<div style="clear:both; background: #0c0; padding: 5px;">Логотип</div>
- Создаём контейнер с будущим логотипом и запрещаем его обтекание с обеих сторон, используя clear:both, теперь что бы не случилось, последующие блоки будут идти снизу, а шапка сайта как ей и положено будет располагаться сверху.
<div style="float: left; background: #c0c; padding: 5px; width: 170px">Меню</div>
- Левая колонка с "Меню" выровнена по левому краю свойством float: left и имеет фиксированный размер в 170 пикселей.
<div style="float: right; background: #c0c; padding: 5px; width: 170px">Реклама</div>
- Правая колонка с рекламой выровнена по правому краю свойством float: right; и тоже имеет фиксированный размер 170 пикселей.
<div style="margin:0 180px; background: #0cc; padding: 5px;">Основное содержание</div>
- Центральная колонка никак не выравнивается, но занимает своё место по центру, так как имеет широкие поля слева и справа margin:0 180px, тем самым не накладываясь на правую и левую колонки. Почему поля 180 пикселей, а не 170 в соответствии с ширенной колонок "Меню" и "Реклама"? Отвечаю: потому что кроме ширины width: 170px эти колонки имеют ещё и отступы со всех сторон padding: 5px складываем 170+5+5=180 - такая вот арифметика..
<div style="clear:both; background: #0c0; padding: 5px;">Подвал</div>
- Ну и "подвал" блок, в котором, как правило, располагаются контактные данные и авторские права, так же как логотип запрещает на всякий случай обтекание слева и справа clear:both и тем самым устремляется вниз страницы.
</body> </html>
- Это нужно "расшифровывать"? :)
В данном примере стилевое описание блоков div происходит с помощью атрибута style - на самом деле это глупо.. привел такой пример, что бы просто понятнее было разобраться в коде, а вообще при блочной верстке обычно назначают каждому блоку свой идентификатор id (см. Глава 6 Классы и идентификаторы.)и всё это дело с остальными потрохами выносят в отдельный css файл..