создание и продвижение сайта (вбиваю в ТОП-10, как гвозди)Настройка и сопровождение платной рекламы яндекс.директ

Глава 11. Поплавки

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

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

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

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

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

    <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 отменяет обтекание данного элемента с указанных сторон.

    Значения:

  • both - запрещает обтекание элемента с левой и правой стороны;
  • left - запрещает обтекание элемента с левой стороны;
  • right - запрещает обтекание элемента с правой стороны;
  • none - запрет на обтекание элемента не задается (по умолчанию).

    Вот пример где 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 файл).

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

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

    << предыдущая глава | следующая глава >>

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

    Ваше письмо×
    Free Web Hosting