Здравствуйте, уважаемые читатели. Эта статья связана с предыдущей про css позиционирование. Если вы ее читали, то помните, что я упоминал там о необходимости поместить боковую колонку справа или слева от основной части. Но ни один из способов позиционирования для этой задачи не подходит. Для этой цели есть отдельное свойство в css — плавающий блок или float.
Плавающий блок в css — решение проблемы
Итак, нам нужно сделать так, чтобы сайдбар располагался сбоку от контентного блока. Каким образом мы можем это реализовать? Рассмотренные нами способы позиционирования не совсем подходят для этой задачи. Конечно, мы могли бы для всех блоков кроме шапки задать абсолютное позиционирования, высчитать их координаты и прописать все это в CSS. Но такая сетка будет нестабильной – при любом малейшем изменении масштаба страницы все “поплывет”. Как видим, использовать абсолютное или относительное позиционирование очень неудобно для нашей задачи. Тут мы подходим к новой теме: так называемые плавающие блоки, которые задаются с помощью свойства float.
Это свойство имеет три значения: left, right и none. Оно позволяет прижать любой блок к левому и правому краю, при этом остальные элементы будут обтекать его с противоположной стороны. Теперь для решения нашей задачи можно поступить просто: зададим сайдбару float: left, а контенту float: right. Теперь наш сайдбар прижат к левому краю страницы, а контент – к правому. Если бы мы задали контентному блоку тоже float: left, то он прижался бы к сайдбару. Тут все зависит от того, какой блок находится выше в html-коде. Если блок сайдбара описан выше, то он первым будет прижат к левому краю, а за ним уже пойдет контент. Чтобы немного отделить блоки можно использовать внешние отступы (margin-ы).
Отмена обтекания
Здесь мы столкнулись с одной проблемой, которая появляется при использовании плавающих блоков. Свойство float тоже нарушает нормальный поток, поэтому расположенный ниже футер поднимется выше и перекроет наши блоки.
Однако эта проблема исправляется очень легко. Чтобы вернуть футер на свое место, нужно всего лишь прописать ему clear: both. Это специальное свойство, которое позволяет нормальным блокам учитывать плавающие в потоке и не перекрывать их. Свойство clear имеет четыре значения:
- Right – разместить блок ниже всех правосторонних плавающих блоков (то есть блоков с float: right)
- Left – разместить блок ниже всех левосторонних плавающих блоков
- Both – разместить блок ниже всех плавающих блоков
- None – значение по умолчанию, не размещать блок ниже плавающих блоков.
Теперь понятно, что указанное для футера clear: both, заставило этот блок стать ниже всех плавающих блоков на странице. Стоит отметить, что вы планируете добавить еще какой-то блок за футером, то для него уже не нужно будет указывать свойство clear.
Плавающие блоки и построение сеток любой сложности
Мы рассмотрели лишь самый простой пример, в котором применяются плавающие блоки. Давайте усложним задачу. Допустим, нам нужно построить сетку, в которой есть шапка, 3 блока (2 сайдбара и контент), которые должны располагаться на одной линии, и футер. Как можно построить такой каркас? Опять же, шапку мы вообще не трогаем, а вот 3 следующих блока можно сделать плавающими. В зависимости от ваших потребностей, их все можно сделать левосторонними, а можно 2 направить влево, а один – вправо. Здесь у вас много вариантов реализации. Главное, не забыть также указать clear: both для футера, чтобы он не перекрыл наши блоки.
Как видите, с помощью плавающих блоков намного проще сверстать крупные блоки. Нам не потребовалось никаких расчетов с пикселами, да и созданная нами сетка будет хорошо отображаться во всех браузерах, а также не будет съезжать при изменении масштаба. Главное, чтобы плавающие блоки помещались в контейнер, в котором они расположены, потому что иначе они будут переноситься вниз.
Итог
Итак, полученных в этой статье знаний вам хватит, чтобы создать приличную страницу и правильно разместить на ней все блоки. Плавающие блоки позволяют быстро разместить крупные блоки на странице, а с помощью абсолютного и относительного позиционирования можно добиться очень точного расположения других элементов.
Конечно, иногда правильнее воспользоваться внешними или внутренними отступами, когда нужно лишь немного скорректировать положение элемента относительно его изначального места. И, конечно же, особенно важную информацию можно вынести в фиксированный блок, и она будет постоянно на глазах у пользователей.
Умение позиционировать элементы на странице пригодится вам, если вы планируете самостоятельно создать сайт на html или хотите уметь редактировать css-стили, чтобы серьезно изменять структуру любого шаблона.
На этом я заканчиваю. Позиционируйте элементы и не пропускайте новых статей на моем блоге.