Выравнивание DIV свойством float 


Выравнивание DIV свойством float

Опубликовано

 

HTML-контейнер DIV используют для верстки сайта. В некоторый случаях для этих целей также применяют таблицы, однако, DIV верстка имеет ряд преимуществ по сравнению с табличной:

  • Компактный и легко читаемый код, за счет выноса оформления в отдельный стилевой файл. Что нельзя сказать про табличную верстку, при использовании которой, код нагромождается большим количеством тегов <tr><td>, а если используются вложенные таблицы, то происходит не только загрязнения кода вышеуказанными тегами, но и к тому же, код, становится трудно читаемым;
  • Загрузка содержимого блока DIV, по мере его отображения на экране, содержимое таблицы отображается только после загрузки всей страницы;
  • Лучшая индексация поисковыми роботами;

Таблицы лучше всего использовать для отображения табличных данных, верстку документа делайте с помощью DIV.

Выравнивание DIV свойством float

Далее подробно рассмотрим свойство float, которое определяет сторону выравнивание DIV контейнера, может принимать значение: left, right. Последующие блоки обтекают его с противоположной стороны. Пусть есть следующий код.

<style type="text/css">
  #div1{width:400px;height:40px;text-align:center;background-color:#8DD5EB;}
  #div2{width:400px;height:40px;text-align:center;background-color:#9C8DEB;}
  #div3{width:400px;height:40px;text-align:center;background-color:#FF9999;}
  #div4{width:400px;height:40px;text-align:center;background-color:#FFD797;}
  #div5{width:400px;height:40px;text-align:center;background-color:#41EC88;}
</style>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>

 

Блоки DIV идущие друг за другом

Рис 1. Блоки DIV идущие друг за другом

 

Применим свойство float, чтобы расположить DIV 2, DIV 3 в одной строке, т.е float:left;

<style type="text/css">
  #div2{float:left;width:250px;height:40px;text-align:center;background-color:#9C8DEB;}
  #div3{float:left;width:250px;height:40px;text-align:center;background-color:#FF9999;}
</style>

 

Положение блоков DIV, после применения свойства float

Рис 2. Положение блоков DIV, после применения свойства float

 

Из рисунка видно, что блок div3 переместился в одну строку с div2, как и планировалось, однако если присмотреться повнимательней видно, что на рисунке не хватает блока div4. Точнее он там есть, но не видим, потому что перекрывается блоком div5. Почему это произошло? Все дело в том, что блок div4, идущий следом за div3,где используется свойство float, выпадает из общего потока. Вследствие чего происходит его перекрытие блоком div5. Чтобы корректно отобразить div4, нужно использовать дополнительное стилевое свойство clear, которое запрещает обтекание блоков. Оно принимает значения:left, right, both. Итак, дополним div4 следующим стилевым оформлением: clear:left;

<style type="text/css">
  #div1{width:250px;height:40px;text-align:center;background-color:#8DD5EB;}
  #div2{float:left;width:250px;height:40px;text-align:center;background-color:#9C8DEB;}
  #div3{float:left;width:250px;height:40px;text-align:center;background-color:#FF9999;}
  #div4{clear:left;width:250px;height:40px;text-align:center;background-color:#FFD797;}
  #div5{width:250px;height:40px;text-align:center;background-color:#41EC88;}
</style>

 

Для корректного отображения блока div4, используется свойство clear

Рис 3. Для корректного отображения блока div4, используется свойство clear

 

А теперь расположим в первом ряду блоки div1 и div2, присвоив им ширину 180px, а во втором блоки div3, div4, div5, задав им ширину в 120px. Чтобы это осуществить, необходимо каждому div блоку в стилях прописать float:left, а в переходный блок div3, который будет перемещаться с первого ряда во второй дополнительно свойство clear:left.

<style type="text/css">
  #div1{float:left;width:180px;height:40px;text-align:center;background-color:#8DD5EB;}
  #div2{float:left;width:180px;height:40px;text-align:center;background-color:#9C8DEB;}
  #div3{clear:left;float:left;width:120px;height:40px;text-align:center;background-color:#FF9999;}
  #div4{float:left;width:120px;height:40px;text-align:center;background-color:#FFD797;}
  #div5{float:left;width:120px;height:40px;text-align:center;background-color:#41EC88;}
</style>

 

Расположение блоков в два ряда.

Рис. 4 Расположение блоков в два ряда.

 

Подведем итоги:

  • Для верстки сайта используйте контейнер DIV;
  • Для выравнивания контейнера DIV, применяйте стилевые свойства float и clear;