Глава 11. Поплавки
Свойство float определяет, по какой стороне будет выравниваться (всплывать) элемент, при этом остальные элементы будут обтекать его с других сторон.
Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.
Значения свойства float:
Небольшой пример: заставим текст обтекать фотографию по правому краю (при этом сам блок с фотографией всплывёт с левой стороны).
<title>float</title>
<div style=border:solid 1px black;width:88px>
<div style=float:left>
<img src=graphics/fon.jpg>
</div>
Текст в этом блоке обтекает рисунок, помещённый в контейнер div с правой стороны, т.к. сам блок с рисунком с помощью свойства float со значением left всплывает слева.
</div>
В примере ниже показано, как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам.
Пример:
<title>float</title>
<div style=float:right;background:#c5f;padding:10px;width:88px>
<span style=float:left;background:#c0e;padding:5px;width:88px>блок выровнен по левому краю</span>
<span style=float:right;background:#c0e;padding:5px;width:88px>блок выровнен по правому краю</span>
содержание блока div обтекает выровненные элементы span слева и справа
</div>
Запрет обтекания
Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон.
Значения:
Вот пример где clear отменяет действие float
<title>clear</title>
<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>
Блочная вёрстка
Разберём классический макет верстки сайта из 3 колонок, а так же шапки и подвала. в котором правая и левая колонки имеют фиксированную ширину, а центральная колонка резиновая, т.е. занимает собой всё оставшееся место.
Взгляните на пример:
<title>Блочная вёрстка</title>
<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'>Основное содержание<p>И ещё куча текста.</div>
<div style=clear:both;background:#0c0;padding:5px>Подвал</div>
Что было понятно "расшифрую" каждую строчку из примера выше:
<title>Блочная вёрстка</title> <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 и имеет фиксированный размер в 170px.
<div style=float:right;background:#c0c;padding:5px;width:170px>Реклама</div>
Правая колонка с рекламой выровнена по правому краю свойством float:right; и тоже имеет фиксированный размер 170px.
<div style='margin:0 180px;background:#0cc;padding:5px'>Основное содержание</div>
- Центральная колонка никак не выравнивается, но занимает своё место по центру, т.к. имеет широкие поля слева и справа margin:0 180px, тем самым не накладываясь на правую и левую колонки. Почему поля 180px, а не 170 в соответствии с ширенной колонок "Меню" и "Реклама"? Отвечаю:потому что кроме ширины width:170px эти колонки имеют ещё и отступы со всех сторон padding:5px складываем 170+5+5=180.
<div style=clear:both;background:#0c0;padding:5px>Подвал</div>
И "подвал" блок, в котором располагаются контактные данные и авторские права, так же как логотип запрещает на всякий случай обтекание слева и справа clear:both и тем самым устремляется вниз страницы.
В данном примере стилевое описание блоков div происходит с помощью атрибута style (на самом деле всё это дело выносят в отдельный css файл).
