Однією з найкращих сторін CSS є те, що стилі дають нам можливість позиціонувати вміст та елементи на сторінці практично будь-яким мислимим чином. Це вносить структурність в наш дизайн і допомагає зробити контент наочнішим.
Є кілька різних типів позиціонування в CSS, кожен з цих типів має свою область дії. У цьому розділі ми збираємося поглянути на кілька різних випадків застосування — створення багаторазово використовуваних макетів і унікальне позиціонування одноразових елементів, а також опис декількох методів як це зробити. із способів позиціонування елементів на сторінці через властивість float. Ця властивість досить універсальна і може застосовуватися різними шляхами.
Власне, властивість float бере елемент, прибирає його зі звичайного потоку сторінки і позиціонує ліворуч або праворуч від батьківського елемент. Всі інші елементи на сторінці обтікатимуть такий елемент. Наприклад, абзаци будуть обтікати зображення, якщо для елемента <img> встановлено властивість float.
Коли властивість float застосовується до кількох елементів одночасно, це дає можливість створити макет з обтічним елементами розташованими поруч або навпроти один одного, як показано в багатоколоночному макеті.
Властивість float приймає кілька значень, два найпопулярніші — це left і right, вони дозволяють елементу розташовуватися ліворуч або праворуч від свого батька.
img { float: left; } float на практиці
Давайте створимо спільний макет сторінки з шапкою вгорі, двома колонками в центрі та підвалом внизу. В ідеалі цю сторінку слід розмітити за допомогою елементів <header>, <section>, <aside> та <footer>, як описано в уроці 2 «Знайомство з HTML». Всередині елемента <body> HTML може виглядати так:
<code data-language="html"><header> ;...</header> <section>...</section> <aside>...</aside> <footer>...</footer>
Демонстрація макета без float
Тут елементи <section> та <aside> є блоковими, тому вони укладаються один поверх іншого за умовчанням. Однак ми хочемо, щоб ці елементи розташовувалися пліч-о-пліч. Встановивши float для <section> як left, а для <aside> як right, ми можемо позиціонувати їх як дві колонки, розташовані навпроти один одного. Наш CSS має виглядати так:
section { float: left; }
aside { float: right; }Для довідки, обтічні елементи розташовуються по краю батьківського елемента. Якщо немає батька, обтічний елемент буде розташовуватися по краю сторінки.
Коли ми встановлюємо елемент, що обтікає, то прибираємо його зі звичайного потоку HTML-документа. Це призводить до того, що ширина елемента за замовчуванням стає шириною його вмісту. Іноді, наприклад, коли ми створюємо колонки для багаторазово використовуваного макету, така поведінка небажана. Це можна виправити шляхом додавання властивості width з фіксованим значенням кожної колонки. Крім того, щоб обтікані елементи не торкалися один одного, в результаті чого вміст одного елемента розташовується поруч з іншим, ми можемо використовувати властивість margin, щоб встановити простір між елементами.
>Нижче ми розширюємо попередній блок коду, додавши margin і width для кожної колонки, щоб краще формувати наш бажаний результат.
section { float: left; margin: 0 1.5%; width: 63%; }
aside { float: right; margin: 0 1.5%; width: 30%; }Демонстрація макету з float
float можуть змінити значення display у елемента
Для обтіканого елемента також важливо розуміти, що елемент видаляється зі звичайного потоку сторінки і що елемент може змінити значення display, задане за замовчуванням. Властивість float спирається на те, що елемент має значення display задано як block і може змінити значення display у елемента за замовчуванням, якщо він ще не відображається як блоковий елемент.
Наприклад, елемент, у якого display вказаний як inline, такий як рядковий <span>, ігнорує будь-які властивості height або width. Однак, якщо для рядкового елемента вказати float, значення display зміниться на block і тоді елемент може приймати властивості height або width.
Коли ми застосовуємо float для елемента, слід стежити за тим, як це впливає на значення властивості display.
Для двох колонок ви можете встановити float, для однієї колонки як left, а для іншої як right, але для кількох колонок нам доведеться змінити наш підхід. Скажімо, наприклад, ми хотіли б отримати ряд із трьох колонок між нашими елементами <header> та <footer>. Якщо ми викинемо наш елемент <aside> і скористаємося трьома елементами <section>, наш HTML може виглядати так:
<code data-language="html"><header>...</header> <section>...</section> <section>...</section> <section>...</section> <footer>...</footer>
Щоб розмістити ці три елементи <section> у рядок з трьох колонок, ми повинні задати float для всіх елементів <section> як left. Ми також повинні налаштувати ширину <section> з урахуванням додаткових колонок і розташувати їх один поруч.
section { float: left; margin: 0 1.5%; width: 30%; }Тут у нас є три колонки, всі з рівною шириною та значенням margin, а також з float, заданим як left.
Демонстрація триколонкового макета з float
Очищення та вміст float
Властивість float була спочатку розроблена, щоб дозволити вмісту обтікати навколо зображень. Для зображення можна встановити float і весь вміст навколо цього зображення, природно, обтікає навколо нього. Хоча це чудово працює для картинок, властивість float насправді не була призначена для використання в макеті і з метою позиціонування і, таким чином, йде з кількома пастками.
Однією з цих пасток є те, що іноді належні стилі не відображаються на елементі, розташованому поруч з обтічним елементом або є його батьком. Коли елемент встановлений обтічним, то він забирається зі звичайного потоку сторінки і, як результат, стилі елементів навколо цього обтічного елемента можуть отримати негативний вплив.
Часто значення властивостей margin і padding інтерпретуються некоректно, змушуючи їх зливатися з обтічним елементом. Інші властивості також можуть бути порушені.
Інша помилка полягає в тому, що іноді небажаний контент починає обтікати елемент із float. Видалення елемента з потоку документа дозволяє всім елементам навколо обтічного елемента обходити його і задіяти будь-який доступний простір навколо обтічного елемента, що часто буває небажаним.
У нашому попередньому прикладі з двома колонками після того, як ми додали float до елементів <section> та <aside>, але до того як встановили властивість width до будь-якого з них, вміст усередині елемента <footer> розташовувався між двома обтічними елементами вище за нього, заповнюючи все доступне простір. Отже, елемент <footer> був би в проміжку між елементами <section> та <aside>, займаючи вільне місце.
Демонстрація макета без очищення float
Щоб запобігти вмісту від обмотування навколо обтічних елементів, нам потрібно зробити очищення float і повернути сторінку до її звичайного потоку. Ми розглянемо як очистити float, а потім поглянемо на їх вміст.
Очистка float
Очистка float відбувається за допомогою властивості clear, яка набуває декількох різних значень: найчастіше використовувані значення — left, right та both.
div { clear: left; }Значення left очищає ліві float, у той час як значення right очищає праві float. Значення both, однак, очистить ліві та праві float і часто є найбільш ідеальним варіантом.
Повертаючись до нашому попередньому прикладу, якщо ми використовуємо властивість clear зі значенням both для елемента <footer> можемо очистити float. Важливо, що clear застосовується до елемента, вказаного після обтічних елементів, а не раніше, щоб повернути сторінку до її звичайного потоку.
footer { clear: both; }Демонстрація макету з очищенням float
Вміст float
Замість очищення float, ще одним варіантом є встановлення вмісту float. Результат вийде майже такий самий, однак вміст float дійсно гарантує, що всі наші стилі будуть відображатися належним чином.
Щоб встановити вміст float, обтічні елементи повинні знаходитися всередині батьківського елемента, він буде виступати як контейнер, залишаючи потік документа повністю звичайним за його межами. У стилях цього батьківського елемента представлений клас group, як показано тут:
.group::before, . group::after { content: ""; display: table; }
.group::after { clear: both; }
.group { clear: both; *zoom: 1; }Тут трохи що відбувається, але, по суті, все, що CSS робить — очищає всі обтічні елементи всередині елемента з класом group і повертає документ у звичайний потік.
Більше конкретно, псевдоелементи ::before і ::after, як зазначено в уроці 4 динамічно генерують елементи вище і нижче елемента з класом group. Ці елементи не включають будь-який контент і відображаються як табличні елементи, подібно елементам блоковим. Елемент, що динамічно генерується після елемента з класом group очищає float всередині елемента з класом group, як і clear раніше. І, нарешті, елемент із класом group також очищає всі float, які можуть з'явитися до нього на випадок, якщо існує float зі значенням left або right. Також сюди включена невелика хитрість, яка змушує старі браузери грати красиво. Тут більше коду, ніж єдина команда clear: both, але він може виявитися дуже корисним.
Розглядаючи наш макет сторінки з двома колонками, ми могли б обернути <section> та <aside> Батьківським елементом. Цей батьківський елемент міститиме обтічні елементи. Код буде виглядати так:
HTML
<code data-language="html"><header>... </header> <div class="group"> <section>...</section> <aside>...</aside> </div> <footer>...</footer>
CSS
.group:: before, .group::after { content: ""; display: table; }
.group::after { clear: both; }
.group { clear: both; *zoom: 1; }
section { float: left; margin: 0 1.5%; width: 63%; }
aside { float: right; margin: 0 1.5%; width: 30%; }Демонстрація макета з вмістом float
Показана тут техніка відома як «clearfix» і часто зустрічається на інших сайтах з ім'ям класу clearfix або cf. Ми вирішили використовувати ім'я класу group, тому що він представляє групу елементів і краще виражає вміст.
Коли для елементів встановлено float важливо стежити за тим, як вони впливають на потік сторінки і переконайтеся, що потік сторінки скидається шляхом очищення або через вміст float, як слід. В іншому випадку, відстеження float може викликати чимало головного болю, особливо на сторінках, що містять кілька рядків, у кожному з яких кілька колонок.
На практиці
Повернемося до сайту Styles Conference і опробуємо на ньому додавання float до деякого вмісту.
- Перш-наперш , перед застосуванням float до будь-якого елементу, давайте забезпечимо вмістом ці обтічні елементи, додавши clearfix до нашого CSS. У файлі main.css, трохи нижче від наших стилів сітки, додамо clearfix під ім'ям класу group, як і раніше.
/*========================================Clearfix========================================*/.group ::before, .group::after { content: ""; display: table; } .group::after { clear: both; } .group { clear: both; *zoom: 1; } Тепер, коли ми можемо використовувати float, давайте поставимо його для основного <h1> всередині елемента <header> як left і дозволимо решті вмісту в заголовку обтікати його справа.
Щоб зробити це, додамо клас logo до елемента <h1>. Потім всередині нашого CSS додамо новий розділ стилів для головного заголовка. У цьому розділі ми виберемо <h1> з класом logo і встановимо float як left.
HTML
<code data-language="html"><h1 class="logo"> <a href="index.html">Styles Conference</a> </h1>
CSS
/*========================================Основний заголовок========================================*/.logo { float: left; }Поки ми тут, додамо трохи більше деталей до нашого логотипу. Почнемо з розміщення елемента <br> або розриву рядка між словами «Styles» та «Conference», щоб змусити текст нашого логотипу розташовуватися на двох рядках.
У CSS додамо кордон по верху нашого логотипу і невеликий вертикальний padding, щоб логотип вільно дихав.
HTML
<code data-language="html"><h1 class="logo"> <a href="index.html">Styles <br> Conference</a> </h1>
CSS
.logo { border-top: 4px solid #648880 ; padding: 40px 0 22px 0; float: left; }Оскільки ми зробили елемент <h1> обтічний, то хочемо встановити вміст float. Найближчим батьком для <h1> є елемент <header>, тому ми додамо до нього клас group. Це застосує до нього стилі clearfix, які ми встановили раніше.
<code data-language="html"><header class="container group"> ... </header>
Елемент <header> набуває форми, так що давайте поглянемо на елемент <footer>. Подібно до того, що ми зробили з <header>, ми встановимо float для наших авторських прав як left всередині <small> і нехай всі інші елементи обтікають його праворуч.
На відміну від елемента <header>, однак, ми не збираємося застосовувати клас безпосередньо до обтічного елемента. Цього разу ми збираємось додати клас до батька обтіканого елемента та використовувати унікальний селектор CSS, щоб вибрати елемент, а потім задати йому float.
Почнемо з додавання класу primary-footer до елемента <footer>. Оскільки ми знаємо, що у нас будуть обтічні елементи всередині <footer>, то маємо додати клас group, поки ми тут.
<code data-language="html"><footer class="primary-footer container group"> ... </footer>
Тепер, коли клас primary-footer встановлений для елемента <footer>, ми можемо використовувати цей клас, щоб цілеспрямовано вибрати елемент <small> за допомогою CSS. Ми хочемо задати йому float як left. Не забудьте створити новий розділ у нашому файлі main.css для стилю основного підвалу.
/*========================================Основний підвал========================================*/.primary-footer small { float: left; }Для перевірки — тут ми вибираємо елемент <small>, який має знаходитися всередині елемента зі значенням primary-footer у атрибуту class, такий як наш елемент <footer>, наприклад.
Нарешті, додамо невеликий padding зверху та знизу елемента <footer>, це допоможе трохи відокремити його від решти сторінки. Ми можемо зробити це безпосередньо за допомогою класу primary-footer.
.primary-footer { padding-bottom: 44px; padding-top: 44px; }
З урахуванням усіх цих змін в елементах <header> та <footer>, ми повинні бути впевнені, що внесли їх на кожній сторінці, а не лише на сторінці index.html.
Позиціювання через inline-block
На додаток до використання float, ще один спосіб, яким ми можемо позиціонувати контент — це застосування властивості display у поєднанні зі значенням inline-block. Метод з inline-block, як ми ще обговоримо, в першу чергу корисний для компонування сторінок або для розміщення елементів у лінію поруч один з одним.
Нагадаємо, що inline-block для властивості display відображає елементи в лінію і дозволяє їм приймати всі властивості блокової моделі, включаючи height, width, padding, border та margin. Застосування inline-block дозволяє нам повною мірою скористатися блоковою моделлю, не турбуючись про очищення будь-яких float.
inline-block на практиці
Давайте поглянемо на наш триколоночний приклад із самого початку. Почнемо ми, зберігаючи наш HTML таким:
<code data-language="html"><header>...</header> <section>...</section> <section>...</section> <section>...</section> <footer>...</footer>
Тепер замість float для наших трьох елементів <section> ми змінимо значення display на inline-block, залишаючи властивості margin та width ті, що були раніше. В результаті наш CSS буде виглядати так:
section { display: inline-block; margin: 0 1.5%; width: 30%; }На жаль, одного цього коду недостатньо, щоб зробити трюк і останній елемент <section> виштовхується на новий рядок. Пам'ятайте, оскільки рядково-блокові елементи відображаються на одній лінії один за одним, вони включають єдиний простір між ними. Коли розмір кожного окремого простору додається до ширини та значення горизонтального margin всіх елементів у рядку, загальна ширина стає занадто великою, виштовхуючи останній елемент <section> на новий рядок. Щоб відобразити всі елементи <section> на одному рядку, слід видалити порожній простір між кожним <section>.
>Демонстрація елементів inline-block з пробілом
Видалення простору між рядково-блоковими елементами
Є кілька методів, як видалити простір між рядково-блочними елементами та деякі з них складніші, ніж інші. Ми збираємося зосередитися на двох найпростіших методах, кожен з яких відбуваються всередині HTML. тому ж рядку, що і тег попереднього елемента <section>. Замість використання нового рядка для кожного елемента ми починаємо елементи з того ж рядка. Наш HTML може виглядати так:
<code data-language="html"><header>...</header> <section> ... </section><section> ... </section><section> ... </section> <footer>...</footer>
Написання рядково-блокових елементів таким чином гарантує, що простору між такими елементами в HTML не існує. Таким чином, простір і не з'явиться при відображенні сторінки.="//jsfiddle.net/webref/x0neqgga/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0">