Вирівнювання DIV властивістю float

HTML-контейнер DIV використовують для верстки сайту. У деяких випадках для цих цілей також застосовують таблиці, однак, DIV верстка має ряд переваг у порівнянні з табличною:

    Компактний код, що легко читається, за рахунок винесення оформлення в окремий стильовий файл. Що не можна сказати про табличну верстку, при використанні якої код нагромаджується великою кількістю тегів

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

Вирівнювання DIV властивістю float

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

властивістю

Рис 1. Блоки DIV, що йдуть один за одним

Застосуємо властивістьfloat, щоб розташувати DIV 2, DIV 3 в одному рядку, тобто float:left ;

вирівнювання

Рис 2. Положення блоків DIV, після застосування властивості float

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

float

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

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

float

Мал. 4 Розташування блоків у два ряди.

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