Параметры размещения контейнеров float и clear в CSS — инструменты блочной верстки
Создание плавающих контейнеров при помощи float
Изначально элементы веб-страницы располагаются на ней друг за другом, в том порядке, в котором определены в html-коде. Размещая в коде теги абзацев, заголовков, списков и др. на странице мы видим их в том же порядке. Но при помощи некоторых атрибутов css мы можем изменить этот порядок. Один из них float.
Правило float позволяет нам создавать так называемые плавающие элементы. То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для вставки картинок на веб-страницу.
У этого правила может быть три возможных значения:
float: left|right|none|inherit
По умолчанию float использует значение none, то есть элементы не имеют никакого обтекания и идут по порядку друг за другом.
Значения left и right выравнивают элемент веб-страницы соответственно по левому и правому краю родительского элемента, а остальное содержимое будет обтекать его с противоположной стороны.
Рассмотрим два блочных элемента. Для начала просто подсветим их фоном различным цветом с помощью правила background:
<div style="background:silver">Содержимое первого блочного элемента</div> <div style="background:#fd0«>Содержимое второго блочного элемента</div>
Так они ведут себя в обычном случае:
А теперь для первого div-а давайте пропишем правило float со значением left, и зададим ему отступы с помощью свойства margin для наглядности его взаимодействия с соседним тегом:
<div style=»background:silver; float:left; margin:4px;">Содержимое первого блочного элемента</div> <div style="background:#fd0«>Содержимое второго блочного элемента</div>
Как видим, первый div стал выравниваться по левому краю, а содержимое соседнего элемента сало обтекать его по правой стороне.
При применении правила float к строчным элементам, последние начинают вести себя как блочные при взаимодействии с другими элементами web-страниц. Так, например, в обычных ситуациях правила height и width для строчных элементов работать не будут. Но после применения атрибута float, параметры размеров сразу начинают иметь значения.
Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:
<span style=»background: #CEE2D3; width:200px; height:100px;float:left">Содержимое строчного элемента span</span><div style="background:silver; float:left; margin:4px;">Содержимое первого блочного элемента</div> <div style="background:#fd0«>Содержимое второго блочного элемента</div>
На рисунке видно, что правила width и height для span-а не сработали и его размеры стали равны в соответствии с его содержимым.
Теперь добавим элементу span правило float со значением left:
<span style=»background: #CEE2D3; width:200px; height:100px;float:left">Содержимое строчного элемента span</span> <div style="background:silver;">Содержимое первого блочного элемента</div> <div style="background: #fd0">Содержимое второго блочного элемента</div>
Теперь элемент span приобрел размеры в соответствии с правилами css, а соседние элементы стали обтекать его с правой стороны. Из этого можно сделать вывод, что правило float можно применять как к строчным, так и к блочным элементам. Причем не зависимо от того к какому элементу применяется правило, он становится блочным.
А что если задать одинаковое значение атрибута стиля float для нескольких следующих друг за другом элементов? Давайте посмотрим:
<span style="background: #CEE2D3; width:100px; float:left">Содержимое строчного элемента span</span> <div style="background:silver; width:100px; float:left">Содержимое первого блочного элемента</div> <div style="background: #fd0; width:100px; float:left">Содержимое второго блочного элемента</div>
Они выстроятся по горизонтали друг за другом в том порядке, в котором они прописаны в html-коде, и будут выровнены по указанному краю родительского элемента.
Остается заметить, что правило float применяется при блочной верстке, основанной на плавающих контейнерах. При применении такого дизайна часто приходится помещать какие-либо элементы ниже тех, что были выровнены по левому или правому краю. Если просто убрать у них правило стиля float или задать для него значение none, результат будет непредсказуемым. В этом случае на помощь приходит правило clear.
Правило Clear
Атрибут стиля clear предоставляет возможность однозначно указать, что данный блочный элемент в любом случае должен располагаться ниже плавающих контейнеров. Другими словами если для элемента задано обтекание с помощью свойства float, то clear отменяет его действие для указанных сторон. Он может принимать следующие значения:
clear: left|right|both|none|inherit
При clear равном left элемент располагается ниже всех элементов, для которых у свойства float задано значение left. Если clear равно right, то отменяется обтекание по правой стороне. И both отменяет обтекание по обеим сторонам элемента. Значение none отменяет действие правила clear и это значение по умолчанию.
Добавим в предыдущем примере, для первого блока div правило clear:left:
<span style="background: #CEE2D3; width:200px; height:100px;float:left">Содержимое строчного элемента span</span> <div style="background:silver; clear:left;">Содержимое первого блочного элемента</div> <div style="background: #fd0">Содержимое второго блочного элемента</div>
С помощью этого правила мы заставили блок div проигнорировать плавающий элемент слева от него.
Блочная верстка — создание колоночного макета с помощью float
Как я уже говорил, свойство float очень подходит для создания колонок при блочной верстке. При создании макета, обычно необходимо выстраивать блоки рядом друг с другом, но по умолчанию в CSS блоки встают друг под другом. В этом случае на помощь приходят плавающие элементы и свойство float.
Допустим мы хотим сделать двухколоночный макет с шапкой и подвалом страницы. В левом блоке у нас будет меню, а справа основное содержимое сайта. Для начала пропишем в html-коде соответствующие блоки:
<div id="header"> <p><img src="images/bmw.jpg" alt="БМВ"></p> <h1>Сайт об автомобилях.</h1> </div> <div class="clr"></div> <div id="leftbar"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Устройство автомобиля</a></li> <li><a href="#">О сайте</a></li> <li><a href="#">Контакты</a></li> </div> <div id="content"> <P>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</P> <P>Научным языком <strong>автомобиль</strong> это:</P> <P><em>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами</em>.</P> <hr> <h2>Классификация автомобилей</h2> <P>Автомобили бывают следующих типов:</P> <UL> <LI>Легковой;</LI> <LI>Грузовой;</LI> <LI>Внедорожник;</LI> <LI>Багги;</LI> <LI>Пикап;</LI> <LI>Спортивный;</LI> <LI>Гоночный.</LI> </UL> </div> <div class="clr"></div> <div id="footer"> <p>Все права защищены. © 2010 год.<br>Сайт об автомобилях.</p> </div>
Итак, мы выделили в отдельные блоки шапку (id="header"), левую колонку (id="leftbar"), область контента (id="content") и подвал (id="footer"). Перед блоками, которые должны располагаться ниже своих предшествующих соседей я поместил пустые контейнеры с атрибутом class="clr". И вот так этот html-код будет отображаться в браузере:
Как видно на рисунке, блоки выстроились по порядку сверху вниз. Блоки создали, теперь пропишем css стили для них (зададим для блока leftbar правило float, ограничим ширину leftbar-а и content-a и зададим фон для блоков):
.clr{
clear:both;
}
#leftbar{
float:left;
width:250px;
background:#E6EDF1;
}
#content{
width:750px;
background:#fff;
}
#footer{
background:#314451;
color:#fff;
text-align:center;
}И смотрим, что получилось:
Видим, что благодаря правилу float:left блок leftbar стал плавать и содержимое блока content как бы обтекает его. Для того, чтобы этого не происходило зададим для блока content внешний отступ с помощью правила margin-left на 10 пикселей больше чем ширина блока leftbar:
#content{
width:750px;
background:#fff;
margin-left:260px;
}И смотрим:
В итоге получили двух-колоночный макет сайта.
Итак, подведем итоги. В данной статье мы рассмотрели два css свойства, которые лежат в основе блочной верстки:
1. float — с помощью него создаются плавающие элементы и появляется возможность выстраивать блоки рядом друг с другом;
2. clear — отменяет действие float для соседних с плавающими блоками элементов.
Кроме этого рассмотрели построение двух-колоночного макета сайта. На этом прощаюсь с вами, до новых встреч.
- Подпись автора
[marquee=left]«МФ»
Мы такие разные и всё-таки мы вместе 
По любым вопросам касающимся форума, обращайтесь ко мне в л/с. [/marquee]
