Нижний колонтитул

Для завершения применения традиционной блочной модели нужно создать и связать с элементом <footer> еще одно свойство CSS. Это свойство восстановит нормальную последовательность документа и позволит поместить <footer> ровно под последним элементом, а не в стороне.

Листинг 2.34. Добавление стиля для элемента <footer> и восстановление нормальной последовательности документа

#main_footer { clear: both; text-align: center; padding: 20px;

Border-top: 2px solid #999999;

}

В листинге 2.34 мы создаем вверху элемента <footer> рамку шириной 2 пиксела и внутреннее поле (забивку) шириной 20 пикселов. Также выравниваем текст внутри элемента по центру. Кроме того, мы восстанавливаем нормальную последовательность документа с помощью свойства clear. Это свойство всего лишь очищает область, занимаемую элементом, и запрещает его отображение сбоку от плавающего блока (блока со свойством float). Чаще всего используется значение both, означающее, что очищаются обе стороны и теперь документ должен следовать обычному потоку (то есть не должен считаться плавающим). Для блочного элемента это означает, что он отображается ниже последнего элемента на новой строке.

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

Когда в традиционной блочной модели есть располагающиеся бок о бок блоки, всегда необходимо добавлять после них элемент со стилем clear: both, чтобы иметь возможность размещать новые блоки под ними в естественном течении документа. На рис. 2.2 показано визуальное представление данной модели и обозначены базовые стили CSS, позволяющие создать такой макет.

рис. 2.2. Визуальное представление традиционной блочной модели

Значения left и right свойства float не гарантируют, что блок будет располагаться у левого или правого края окна соответственно. В действительности эти значения всего лишь делают плавающей определенную сторону документа, разрушая нормальный поток документа. Например, если значение свойства равно left, то браузер попытается расположить элемент у левого края доступного пространства. Если рядом с предыдущим элементом есть место, то новый элемент окажется на экране справа, так как именно левая сторона у него плавающая. Получается, что он «плывет» налево, пока не натыкается на что-то, что его заблокирует, — это может быть элемент-брат или край родительского элемента. Об этом важно помнить при создании макетов с несколькими столбцами. Каждому столбцу в свойстве float присваивается значение left, для того чтобы

все столбцы располагались в ряд в правильном порядке. Каждый столбец «плывет» налево до тех пор, пока не натолкнется на другой столбец или границу родительского элемента. Данный метод позволяет расположить блоки рядом друг с другом на одной строке, создав в визуальном представлении на экране набор столбцов.