Здрастуйте, шановні читачі блогу . Сьогодні ми продовжуємо вивчати класичний CSS і на черзі у нас плаваючі елементи, створювані з допомогою Float. Так само ми торкнемося призначення правила Clear (both, left, right) і подивимося на прикладах горизонтального меню і трехколоночного макета, як все це можна використовувати на практиці.
Трохи раніше ми з вами вже розглянули багато аспектів мови стильової розмітки, про які ви можете дізнатися зі складається по ходу розповіді Довідника CSS. Таблиці каскадних стилів вивчати значно складніше, ніж чистий Html, і якщо вам щось здасться складним і на перших порах не зрозумілим, то нічого дивного і страшного тут немає. Спробуєте на практиці, наб’єте руку і все устаканиться. Удачі!
Float — створення плаваючих елементів в коді CSS
Коли ми вставляємо в документ кілька тегів поспіль, то очікуємо їх поява на сторінці приблизно в тому ж порядку, в якому вони і були прописані в коді. Наприклад, при створенні тексту ми вставляємо заголовки, абзаци, списки і т. п., щоб побачити їх на веб наступними в тому ж самому порядку.
Але в CSS є два правила, які можуть це змінити. Мова йде про float і position. Коли до тегам не застосовуються ці два правила, то такий варіант називається кодом у нормальному потоці.
З допомогою float ми створюємо так звані плаваючі елементи. До речі, навіть у чистому Html ми вже з вами стикалися з подібним, коли для картинок прописували атрибут Align зі значеннями Left або Right (читайте про обтікання картинок текстом і тег Img).
У цього правила є три можливих значення (по специфікації консорціуму W3C), причому за умовчанням використовується значення None, тобто спочатку у нас ніяких плаваючих елементів:
Значення Left і Right як раз і дозволяють створювати плавання. При цьому властивості такого тегу поміняються і він інакше буде взаємодіяти з іншими. Давайте розглянемо все це на прикладі. Візьмемо один рядковий тег Span і два блочних елемента Div.
Пам’ятаєте, у статті про призначення height і width я говорив, що для рядкових елементів ці правила працювати не будуть, тобто для них не можна задати висоту і ширину. Тому для демонстрації зміни властивостей плаваючого елементу я додаю рядковий тегу Span правила height і width, які в звичайній ситуації працювати, природно, не будуть.
Всі правила я буду прописувати з допомогою атрибута Style (у професійної верстки цей спосіб практично не використовується), про який ви зможете прочитати за наведеним посиланням. Також для наочності я подсвечу теги фоном з допомогою правила background:
Рядковий
Блочний
Блочний
Тепер давайте пропишемо для Span правило float зі значення Left і подивимося що з цього вийде (для наочності ще поставимо нашу знову спеченому плаваючого блоку ще й відступ margin у 5px зі всіх сторін (margin:5px), щоб було зрозуміліше його взаємовідносини з сусідніми тегами:
Наш елемент починає плавати вліво (бо ми прописали float:left). При цьому заробили ширина і висота, задані в правилах height і width, не дивлячись на те, що Span спочатку був рядковим тегом. Крім цього заробив і margin по висоті (відступ до сусідів), який для рядкових тегів спочатку був даремний.
Звідси ми робимо висновок, що після прописування float елемент став зовсім іншим і не схожим на те, чим він був до цього. Крім цього він став по-іншому взаємодіяти з іншими тегами.
Способи взаємодії залежать від того, яке значення Display для нього прописано, але в основному ми буде працювати з блоками (тому і верстка називається блокової), для яких це правило CSS має значення block.
Частіше всього це буде контейнер Div — ідеальний для побудови блочної схеми, т. к. спочатку має нульові margin і padding, а height і width у нього мають значення Auto. Т. о. Div є структурним блоком, так само як і Span, у якого теж все нульове.
Але давайте повернемося до наших баранів, а саме опишемо всі ті зміни, які відбуваються з нею, коли до нього застосовується правило Float зі значенням Left або Right:
Clear (both, left, right) і горизонтальне меню на Float
Виникає питання: а чи можна блоки, які стоять у коді нижче плаваючого елементу (з float:left або right), змусити з ним взаємодіяти (тобто вибудовувати своє положення в залежності від розмірів плаваючих блоків)? Виявляється, можна, і для цього в CSS передбачено спеціальне правило Clear. Воно має чотири допустимих значення (none використовується за замовчуванням):
Коли ми для будь-якого Html тега прописуємо CSS правило Clear, то це означає, що цей елемент повинен буде врахувати всі плаваючі і стоять перед ним в коді блоки:
Давайте спробуємо подивитися на прикладі clear:left для наведеного трохи вище скріншота (його ми пропишемо для зеленого Div контейнера):
Float блок
Блочний
Блочний
Т. о. ми змусили контейнер Div побачити і врахувати плаваючий зліва від нього елемент. Якщо для цього ж тега прописати clear:right, то ніяких змін не відбудеться, бо плаваючих вправо блоків (з right) у нас в коді перед цим тегом не спостерігається.
Якщо ж використовувати clear:both, то будуть враховані всі плаваючі блоки (і вліво, і вправо — які знайдуться). Both використовують в тих випадках, коли невідомо з якою з сторін з’явиться елемент плаваючий і високий. Саме його і можна найчастіше зустріти в коді в наш час.
Ну, і давайте на невеликому прикладі подивимося для чого ж може бути використано Float при верстці сайту. Справа в тому, що з допомогою плаваючих блоків можна створити горизонтальне меню з звичайного списку. Нехай у нас є маркований Html списку UL такого виду:
- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
- Пункт 5
Виглядати це неподобство буде приблизно так:
Тепер давайте приберемо маркери з допомогою CSS правила list-style значення None, а також зробимо малі теги гіперпосилань блоковими з допомогою display:block, подсветим їх якимось фоном і задамо невеликі зовнішні відступи margin для елементів списку, щоб їх розклеїти один від одного.
Для різноманітності спробуємо задати властивості з допомогою тега Style, який прописується між відкриваючим і закриваючим Head:
.menu{
list-style:none;
margin:0;
padding:10px;
}
.menu li a{
display:block;
padding:10px;
background:#ccf;
}
.menu li{
margin:5px;
}
В результаті картинка нашого майбутнього шедевра буде виглядати набагато більш схожим на меню, але, правда, на вертикальне меню, а адже нам хочеться створити горизонтальне за допомогою Float:
Зробити з цього меню горизонтальне можна буде, лише додавши елементу списку Li правило float:left:
.menu li{
margin:5px;
float:left;
}
Чому вийшло саме так? Плаваючий блок (з float відмінним від none), коли йому треба вишикуватися, дивиться на сусідні теги, на межі контейнера, і встає так високо на вебсторінці, як тільки зможе. Так і зробив «Пункт 1» — встав максимально високо, як тільки міг і потім вже поїхав вліво (бо у нього прописано float:left).
«Пунктом 2» теж вистачило місця стати максимально високо, а потім він поїхав вліво і уткнувся в попередній плаваючий блок. Теж саме можна сказати і про інших пунктах нашого горизонтального меню. Але що ж станеться, якщо в контейнері по ширині не буде вистачати місця для всіх пунктів меню? Давайте подивимося, штучно обмеживши область перегляду:
Коли плаваючого елементу (з float) не вистачає місця спливти наверх, тоді він визначає нижню межу попереднього плавучого блоку (з іншими блоковими тегами, як ви пам’ятаєте, плаваючі не взаємодіють) і по ній вибудовує своє вертикальне положення, а потім вже їде вліво до упору. У нашому випадку «Пункт 5» успішно доїхав до лівої межі області перегляду.
Але якщо б, наприклад, висота першого пункту виявилася б більше, ніж у четвертого, за яким «Пункт 5» визначив свою верхню межу, то вийде ось така картина:
Якщо виявиться занадто високим «Пункт 4», то картина зміниться на таку:
У цьому випадку «Пункт 5» вирівнявся по висоті останнього плаваючого блоку і не зустрівши нікого перешкоди на шляху доїхав до лівої межі контейнера.
Звідси, до речі, випливає висновок, що якщо текст в пунктах такого горизонтального меню на основі css правила float буде дуже довгим, то може вийти саме так, як було показано на попередніх скріншотах. Можливо, що робити подібне меню буде простіше з допомогою фонових картинок, розмір яких фіксований. Можна використовувати і display:table, але створення таких меню це вже тема окремої статті і, можливо, навіть не одного.
Блокова верстка — створення колонок в макеті з допомогою Float
Але основне призначення Float це, звичайно ж, створення колонок при використанні блочної верстки. Я вже про це дуже докладно писав у серії статей, присвяченій створенню двох і трехколоночных макетів при Div верстці.
При створенні макету сторінок вам завжди буде необхідно вибудовувати блокові області поруч один з одним (наприклад, область лівої колонки, область з контентом і правої колонки). Звичайні блоки в CSS встають один під одним. Як же їх поставити поруч один з одним? Звичайно ж, з допомогою плаваючих елементів на основі Float.
Більш детально створення двох і трехколоночного макета ви зможете вивчити за наведеною трохи вище посиланню, а тут я озвучу лише закладену в цьому ідею без її подальшої деталізації. Спочатку беруться три контейнера Div з присвоєними ними класами.Вони й будуть утворювати в кінцевому рахунку наші колонки:
Вміст лівої колонки
Вміст правої колонки
Текст області вмісту
Потім для класів контейнерів лівої і правої колонки задаємо float:left і right (контейнери для наочності підсвічуються фоном з допомогою background), а також обмежуємо їх ширину, з width:
#left{
background:#ccf;
width:100px;
float:left;
}
#right{
background:#fcc;
width:150px;
float:right;
}
#center{
background:#cfc;
}
Таким чином ми отримали дві бічні колонки фіксованої ширини за допомогою чарівного правила Float. Залишається тільки розібратися з областю контенту:
Далі потрібно центральну колонку відсунути зліва на ширину ліворуч, а праворуч — на ширину правою за допомогою все того ж правила margin (а саме для нашого прикладу margin:0 150px 0 100px;):
#center{
background:#cfc;
margin:0 150px 0 100px;
}
Плавають тільки права і ліва колонки, а центральна немає. Ще раз нагадую, що про блочну верстку ви можете почитати за наведеною трохи вище посиланням. У статті будемо розглядати не менш цікаве і дуже значуща CSS правило Position.
Удачі вам! До зустрічей на сторінках блогу
