Резюме

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

Такий спосіб розробки багатоколонного макета має і певний недолік, який проявляється в тому, що при зменшенні вікна браузера до певної величини колонки перестрибують одна під іншу. Щоб цього уникнути, додатково використовують стильовий атрибут margin-left , додаючи його до правої колонки. У такому випадку шари залишаються на вихідних місцях, незалежно від розмірів вікна браузера.

Здрастуйте, шановні читачі блогу сайт. Сьогодні ми продовжуємо вивчати класичний CSS та на черзі у нас плаваючі елементи, що створюються за допомогою Float. Також ми торкнемося призначення правила Clear (both, left, right) і подивимося на прикладах горизонтального меню і триколонкового макета, як це можна використовувати практично.

Трохи раніше ми з вами вже розглянули багато аспектів мови стильової розмітки, про які ви можете дізнатися з оповідання, що складається по ходу. Таблиці каскадних стилів вивчати значно складніше, ніж чистий Html, і якщо вам щось здасться складним і спочатку не зрозумілим, то нічого дивного і страшного тут немає. Спробуєте на практиці, наб'єте руку і все вгамується. Успіхів!

Float — створення плаваючих елементів у CSS коді

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

Але в CSS є два правила, які можуть змінити це. Йдеться про float та position. Коли до тегів не застосовуються ці два правила, такий варіант називається кодом у нормальному потоці.

У цього правила є три можливі значення (за специфікацією консорціуму W3C), причому за умовчанням використовується значення None, тобто. спочатку у нас жодних плаваючих елементів немає:

Значення Left та Rightтаки дозволяють створювати плавання. При цьому властивості такого тега зміняться і він інакше взаємодіятиме з іншими. Давайте розглянемо це на прикладі. Візьмемо один рядковий тег Span і два блокові елементи Div.

Пам'ятайте, у статті призначення я говорив, що з малих елементів ці правила працювати не будуть, тобто. для них не можна задати висоту та ширину. Тому для демонстрації зміни властивостей плаваючого елемента я додаю рядковому тегу Span правила height і width, які в звичайній ситуації працювати, звичайно, не будуть.

Рядковий

Тепер давайте пропишемо для Span правило float зі значення Left і подивимося що з цього вийде (для наочності ще поставимо нашому новоспеченому плаваючому блоку ще й відступ margin в 5px з усіх боків (margin:5px), щоб було зрозуміліше його взаємини з сусідніми тегами:

Наш елемент починає плавати вліво (бо ми прописали float: left). При цьому заробили ширина і висота, задані в правилах height і width, хоча Span спочатку був малим тегом. Крім цього запрацював і margin по висоті (відступ до сусідів), який для малих тегів спочатку був марним.

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

Способи взаємодії залежать від того, яке значення для нього прописано, але в основному ми будемо працювати з блоками (тому і верстка називається блоковою), для яких це CSS правило має значення block.

Найчастіше це буде контейнер Div - ідеальний для побудови блочної схеми, т.к. спочатку має нульові, а height і width у нього мають значення Auto. Т.о. Div є структурним блоком, так само як і Span, у якого теж все нульове.

Але повернімося до наших баранів, а саме опишемо всі ті зміни, які відбуваються з тегом, коли до нього застосовується правило Float зі значенням Left або Right:

Clear (both, left, right) та горизонтальне меню на Float

Виникає питання: а чи можна блоки, що стоять у коді нижче плаваючого елемента (з float:left або right), змусити з ним взаємодіяти (тобто вибудовувати своє становище залежно від розмірів плаваючих блоків)? Виявляється можна, і для цього в CSS передбачено спеціальне правило Clear. Воно має чотири допустимі значення (none використовується за замовчуванням):

Коли ми для будь-якого Html тега прописуємо CSS правило Clear, то це означає, що цей самий елемент повинен буде врахувати всі плаваючі блоки, що стоять перед ним у коді:

1. Зліва, якщо прописано clear:left
2. Праворуч у right
3. Скрізь у clear:both (означає з обох боків)

Спробуймо подивитися на прикладі clear:left для наведеного трохи вище скріншота (його ми пропишемо для зеленого Div контейнера):

Float блок

Т.о. ми змусили контейнер Div побачити та врахувати плаваючий ліворуч від нього елемент. Якщо для цього тега прописати clear:right, то жодних змін не відбудеться, бо плаваючих вправо блоків (з right) у нас в коді перед цим тегом не спостерігається.

Якщо ж використовувати clear:both, то будуть враховані всі плаваючі блоки (і вліво, і вправо - які знайдуться). Both використовують у тих випадках, коли невідомо з якої сторони з'явиться елемент плаваючий і високий. Саме його і можна найчастіше зустріти у коді в наш час.

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

• Пункт 1
• Пункт 2
• Пункт 3
• Пункт 4
• Пункт 5

Виглядати це неподобство буде приблизно так:



Тепер давайте приберемо маркери за допомогою зі значенням None, а також зробимо малі блоковими за допомогою display:block, підсвічуємо їх яким-небудь фоном і задамо невеликі зовнішні відступи margin для елементів списку, щоб їх розклеїти один від одного.

Для різноманітності спробуємо задати властивості за допомогою тега Style, який прописується між відкриваючим та закриваючим Head:

В результаті картинка нашого майбутнього шедевра буде виглядати набагато більш схожим на меню, але, правда, на меню вертикальне, адже нам хочеться створити горизонтальне за допомогою 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 це, звичайно ж, створення колонокпри використанні блокової верстки. Я вже про це дуже докладно писав у серії статей, присвяченій створенню.

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

Більш докладно створення двох і триколонкового макета ви зможете вивчити за наведеним вище посиланням, а тут я озвучу тільки закладену в цьому ідею без її подальшої деталізації. Спочатку беруться три контейнери Div з присвоєними ними класами.

Вміст лівої колонки
Вміст правої колонки
Текст області контенту

Потім для класів контейнерів лівої та правої колонки задаємо float:left та right (контейнери для наочності підсвічуються фоном за допомогою background), а також обмежуємо їх ширину за допомогою width:

Таким чином, ми отримали дві бічні колонки фіксованої ширини за допомогою чарівного правила Float. Залишається тільки розібратися з областю контенту:



#center( background:#cfc; margin:0 150px 0 100px; )



Успіхів вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

Position (absolute, relative і fixed) - способи позиціонування Html елементів CSS (правила left, right, top і bottom)
Позиціонування за допомогою Z-index та CSS правило Cursor для зміни курсору миші
Display (block, none, inline) у CSS - задаємо тип відображення Html елементів на веб-сторінці
List style (type, image, position) - Css правила для налаштування зовнішнього вигляду списків у Html коді
CSS властивості text-decoration, vertical-align, text-align, text-indent для оформлення тексту в HTML
Background у CSS (color, position, image, repeat, attachment) - все для завдання кольору фону або фонової картинки Html елементів
Height, width і overflow - CSS правила для опису області контенту при блоковій верстці
Для чого потрібен CSS, як підключити каскадні таблиці стилів до Html документа та основи синтаксису цієї мови
Padding, Margin і Border - задаємо в CSS внутрішні та зовнішні відступи, а так само рамки для всіх сторін (top, bottom, left, right) Як настроїти чергування фонового кольору рядків таблиць, списків та інших Html елементів на сайті за допомогою псевдокласу nth-child

Атрибути забезпечують додаткову інформацію про HTML елементи.

HTML Атрибути

• HTML елементи можуть мати атрибути
• Атрибути забезпечують додаткову інформаціюпро елемент
• Атрибути завжди вказуються в початковому тегу
• Атрибути йдуть у парах ім'я/значення, наприклад: ім'я = "значення"

Приклад Атрибуту

Завжди Ставте Лапки У Значень Атрибутів

Значення атрибутів завжди повинні бути поміщені в лапки.

Як правило, використовують подвійні лапки, але одинарні лапки також допустимі.

Порада:У деяких рідкісних ситуаціях, коли значення атрибуту саме містить лапки, необхідно використовувати одинарні лапки: name="Іван "Vano" Петров"

Імена атрибутів та значення атрибутів не чутливі до регістру.

Проте, Світовий Інтернет Консорціум (W3C) рекомендує малі атрибути/значення атрибутів у HTML 4.

Нові версії (X)HTML вимагають малих атрибутів.

HTML Довідник Атрибутів

Список всіх HTML елементів ви знайдете тут:

Нижче список деяких атрибутів, які є стандартними для більшості елементів HTML:

Більш детальну інформацію про стандартні атрибути дивіться тут.

Матеріал із Довідник Web-мов

Можливі значення

sFloat Рядокяка може визначати та приймати одне з наступних значень:

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

Зауваження

Якщо властивості об'єкта задані значення left чи right, він інтерпретується як блоковий об'єкт. Отже, для нього властивість display ігноруватиметься.

Об'єкти, які йдуть за обтічним об'єктом, розташовуються відповідно до заданих властивостей обтікання.

Обтічний об'єкт переміщається вліво або вправо доти не досягає меж (bodrer, margin, padding) іншого блочного об'єкта.

Якщо для об'єктів div і span задана ширина, вони відображатимуться при використанні атрибута float. У Microsoft Internet Explorer 5 для таких об'єктів ширина за замовчуванням, і об'єкти відображаються в будь-якому випадку.

Приклади

Наступні приклади ілюструють застосування властивості styleFloatта атрибуту floatдля встановлення різних параметрів обтікання об'єкта.

У першому прикладі використовується атрибут floatдля завдання з якого боку від тексту розташовуватимуться два малюнки (sphere.jpg перебуватиме ліворуч, а cone.jpg справа).



У другому прикладі використовується властивість styleFloatдля того, щоб зображення змінилися місцями при наведенні курсору миші на кнопку.

: Flip-flop зображення.