Float і clear в css - інструменти блокової верстки

Вітаю Вас, шановні Новомосковсктелі блогу webcodius.ru. Сьогодні ми продовжимо вивчати CSS і розглянемо правила float і clear, що мають важливе значення при блокової верстці сайтів.

Створення плаваючих контейнерів за допомогою float

Приклад створення блогу на WordPress 4

Спочатку елементи веб-сторінки розташовуються на ній один за одним, в тому порядку, в якому визначені в html-коді. Розміщуючи в коді теги абзаців, заголовків, списків та ін. На сторінці ми бачимо їх у тому ж порядку. Але за допомогою деяких атрибутів css ми можемо змінити цей порядок. Один з них float.

Правило float дозволяє нам створювати так звані плаваючі елементи. Тобто ми можемо встановити для блочного елемента вирівнювання по лівому або правому краю батьківського елементу (блочного контейнера, в який він вкладений, або самої Web-сторінки). При цьому блоковий елемент буде притискатися до відповідного краю батька, а решта вмісту буде обтікати його з протилежного боку. Подібне ми вже бачили в чистому html, коли розглядали атрибут align зі значеннями left і right для тега img, який використовується для вставки картинок на веб-сторінку.

У цього правила може бути три можливих значення:

За замовчуванням float використовує значення none. тобто елементи не мають ніякого обтікання і йдуть по порядку один за одним.

Значення left і right вирівнюють елемент веб-сторінки відповідно по лівому і правому краю батьківського елементу, а решта вмісту буде обтікати його з протилежного боку.

Розглянемо два блокових елемента. Для початку просто підсвітити їх фоном різним кольором за допомогою правила background:

А тепер для першого div-а давайте пропишемо правило float із значенням left, і поставимо йому відступи за допомогою властивості margin для наочності його взаємодії з сусіднім тегом:

Як бачимо, перший div став вирівнюватися по лівому краю, а вміст сусіднього елемента сало обтікати його по правій стороні.

При застосуванні правила float до рядковим елементів, останні починають вести себе як блокові при взаємодії з іншими елементами web-сторінок. Так, наприклад, в звичайних ситуаціях правила height і width для малих елементів працювати не будуть. Але після застосування атрибута float, параметри розмірів відразу починають мати значення.

Давайте до попереднього приклади додамо елемент span і в стилях пропишемо для нього розміри:

Вміст сатиричного елемента span

На малюнку видно, що правила width і height для span-а не спрацювали і його розміри стали рівні відповідно до його вмістом.

Тепер додамо елементу span правило float із значенням left:

Вміст сатиричного елемента span

Тепер елемент span придбав розміри відповідно до правил css, а сусідні елементи стали обтікати його з правого боку. З цього можна зробити висновок, що правило float можна застосовувати як до рядковим, так і до блокових елементів. Причому не залежно від того до якого елементу застосовується правило, він стає блоковим.

А що якщо задати однакове значення атрибуту стилю float для декількох наступних один за одним елементів? Давайте подивимося:

Вміст сатиричного елемента span

Вони вишикуються по горизонталі один за одним в тому порядку, в якому вони прописані в html-коді, і будуть вирівняні за вказаною краю батьківського елементу.

Залишається зауважити, що правило float застосовується при блокової верстці, заснованої на плаваючих контейнерах. При застосуванні такого дизайну часто доводиться поміщати будь-які елементи нижче тих, що були вирівняні по лівому або правому краю. Якщо просто прибрати у них правило стилю float або задати для нього значення none, результат буде непередбачуваним. У цьому випадку на допомогу приходить правило clear.

правило Clear

Приклад створення блогу на WordPress 4

Атрибут стилю clear надає можливість однозначно вказати, що даний блоковий елемент в будь-якому випадку повинен розташовуватися нижче плаваючих контейнерів. Іншими словами якщо для елемента задано обтікання за допомогою властивості float, то clear скасовує його дію для зазначених сторін. Він може приймати наступні значення:

При clear рівному left елемент розташовується нижче всіх елементів, для яких у властивості float задано значення left. Якщо clear одно right, то скасовується обтікання по правій стороні. І both скасовує обтікання по обидва боки елемента. Значення none скасовує дію правила clear і це значення за замовчуванням.

Додамо в попередньому прикладі, для першого блоку div правило clear: left:

Вміст сатиричного елемента span

За допомогою цього правила ми змусили блок div проігнорувати плаваючий елемент зліва від нього.

Блокова верстка - створення колоночного макета за допомогою float

Приклад створення блогу на WordPress 4

Як я вже говорив, властивість float дуже підходить для створення колонок при блокової верстці. При створенні макета, зазвичай необхідно вибудовувати блоки поруч один з одним, але за замовчуванням в CSS блоки встають один під одним. У цьому випадку на допомогу приходять плаваючі елементи і властивість float.

Припустимо ми хочемо зробити двоколонковому макет з шапкою і підвалом сторінки. У лівому блоці у нас буде меню, а праворуч основний вміст сайту. Для початку пропишемо в html-коді відповідні блоки:

Отже, ми виділили в окремі блоки шапку (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 для сусідніх з плаваючими блоками елементів.