Поплавки.

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

Ладно, будем считать, что отдохнули перед очередной порцией информации.. и хотя в этой главе речь пойдёт о поплавках диалоги будут вовсе не о рыбалке..

Итак, свойство float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим"

Теперь побольше конкретики и примеров..

Обтекание элемента

Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.

Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.

Значения свойства float:

left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа.
right - Выравнивает элемент по правому краю, остальные элементы обтекают его слева.
none - Выравнивание элемента не задается. (по умолчанию)

Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией "всплывёт" с левой стороны.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float</title>
</head>
<body>
<div style="border: solid 1px black; width: 220px">
<div style="float: left;">
<img src="graphics/fon.jpg">
</div>
Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, "всплывает" слева.
</div>
</body>
</html>

смотреть пример

А вот в примере ниже показано как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float</title>
</head>
<body>
<div style="float: right; background: #c5ffa0; border: solid 1px black; padding: 10px; width: 420px">
<span style="float: left; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по левому краю</span>
<span style="float: right; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по правому краю</span>
содержание блока div обтекает выровненные элементы span слева и справа
</div>
</body>
</html>

смотреть пример

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

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

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

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