Запрет обтекания

Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон.

Значения:

· both - Запрещает обтекание элемента с левой и правой стороны.

· left - Запрещает обтекание элемента с левой стороны.

· right - Запрещает обтекание элемента с правой стороны.

· none - Запрет на обтекание элемента не задается.(по умолчанию)

Вот пример где clear отменяет действие float

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://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 я приводил примеры верстки страницы при помощи таблиц (https://webremeslo.ru/html/glava4.html) и фреймов (https://webremeslo.ru/html/glava7.html), теперь имея накопленный багаж знаний, настало время познакомить Вас с блочной версткой сайта, используя блоки div и свойства CSS.

Разберём классический макет верстки сайта из трёх колонок, а так же " шапки" и " подвала".. в котором правая и левая колонки имеют фиксированную ширину, а центральная колонка " резиновая" т.е. занимает собой всё оставшееся место.

Взгляните на пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://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" " https://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 файл..

Полезные советы:

· Верстка блоками div стремительно набирает популярность, и позволяет сверстать сайт практически любой сложности, однако не всегда стоит полностью отказываться от табличного способа верстки. Зачастую верным решением является комбинированный способ верстки, где грубым " каркасом" сайта является таблица, наполненная блоками div которые выполняют более тонкие задачи верстки сложного по структуре сайта.