Пошук уроків, статей та іншого контенту
Застосуєте float для обтікання текстом і зображеннями та навчитеся очищати потік за допомогою clear.
floatВластивість float переміщує елемент до лівого або правого краю батьківського контейнера. Інший вміст, наприклад текст, обтікає цей елемент із протилежного боку.
Основні значення:
.image {
float: left;
}left — елемент притискається до лівого краю;
right — елемент притискається до правого краю;
none — елемент не обтікається;
inherit — значення успадковується від батьківського елемента.
Плаваючий елемент залишається частиною документа, але вилучається зі звичайного потоку в особливий спосіб: наступний текст і рядковий вміст можуть розташовуватися поруч із ним.
Найпоширеніший сценарій для float — зображення всередині текстового матеріалу.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Обтікання зображення</title>
<style>
.article-image {
float: left;
width: 220px;
margin: 0 20px 12px 0;
border-radius: 8px;
}
.article {
max-width: 700px;
margin: 40px auto;
padding: 0 20px;
font: 18px/1.6 Arial, sans-serif;
}
.article-title {
margin-top: 0;
}
</style>
</head>
<body>
<article class="article">
<h1 class="article-title">Як працює веббраузер</h1>
<img
class="article-image"
src="https://picsum.photos/id/180/440/300"
alt="Ноутбук на столі"
>
<p>
Веббраузер отримує HTML-документ від сервера, аналізує його та створює
структуру сторінки. Потім браузер застосовує CSS-правила, завантажує
потрібні ресурси й відображає результат на екрані.
</p>
<p>
Зображення розташоване ліворуч, а текст обтікає його праворуч.
Відступ між зображенням і текстом створено за допомогою властивості
<code>margin</code>.
</p>
</article>
</body>
</html>Зображення має ширину 220px, а margin-right: 20px створює простір між ним і текстом. Нижній відступ margin-bottom не дає тексту впритул підходити до нижнього краю зображення.
Для обтікання зображення праворуч достатньо змінити правило:
.article-image {
float: right;
margin: 0 0 12px 20px;
}У цьому випадку праворуч від зображення вже немає тексту, тому основний відступ потрібен зліва — margin-left: 20px.
float на наступні елементиfloat впливає не лише на текст у тому самому абзаці. Наступні елементи також можуть намагатися розташуватися поруч із плаваючим елементом, якщо для них достатньо місця.
<div class="card">
<div class="avatar">А</div>
<h2>Анна</h2>
<p>Frontend-розробниця</p>
</div>.card {
max-width: 320px;
padding: 16px;
border: 1px solid #ccc;
}
.avatar {
float: left;
width: 64px;
height: 64px;
margin-right: 12px;
border-radius: 50%;
background: #2563eb;
color: white;
text-align: center;
line-height: 64px;
font-size: 24px;
}Заголовок і абзац можуть обтікати .avatar. Якщо потрібно, щоб окремий елемент починався під плаваючим елементом, використовуйте clear.
clearВластивість clear забороняє елементу розташовуватися поруч із плаваючими елементами.
.next-section {
clear: both;
}Значення clear:
left — елемент не розташовується поруч із елементами з float: left;
right — елемент не розташовується поруч із елементами з float: right;
both — елемент очищає обтікання з обох боків;
none — обтікання не очищується.
clear: both<section class="profile">
<div class="photo">Фото</div>
<h2>Профіль користувача</h2>
<p>
Цей текст обтікає плаваючий блок. Його довжина визначає, скільки рядків
буде розташовано поруч із блоком.
</p>
<h2 class="contacts">Контакти</h2>
<p>
Цей заголовок має починатися під плаваючим блоком, а не праворуч від нього.
</p>
</section>.profile {
max-width: 600px;
padding: 20px;
border: 1px solid #cbd5e1;
}
.photo {
float: left;
width: 140px;
height: 100px;
margin: 0 16px 10px 0;
background: #dbeafe;
text-align: center;
line-height: 100px;
}
.contacts {
clear: both;
}Без clear: both заголовок .contacts може розташуватися праворуч від .photo, якщо там залишиться достатньо місця. З clear: both браузер переносить його під усі плаваючі елементи.
Плаваючі елементи можуть створювати іншу проблему: висота батьківського контейнера не завжди враховує їх.
<div class="gallery">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
</div>
<p class="description">
Текст після галереї.
</p>.gallery {
padding: 12px;
border: 2px solid #2563eb;
}
.tile {
float: left;
width: 100px;
height: 80px;
margin: 8px;
background: #bfdbfe;
text-align: center;
line-height: 80px;
}
.description {
clear: both;
}Усі дочірні блоки мають float, тому вони вилучені зі звичайного потоку. Батьківський .gallery може мати висоту, що дорівнює лише внутрішнім відступам і рамці, а не висоті плиток.
Це називають проблемою «схлопування» або втрати висоти батьківського контейнера.
Один зі способів — додати після плаваючих елементів спеціальний елемент із clear.
<div class="gallery">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
<div class="clear"></div>
</div>.clear {
clear: both;
}Порожній елемент очищає потік і змушує контейнер враховувати простір над ним. Проте додавання службового елемента в HTML не завжди зручне.
Поширений варіант — створити очищення через ::after:
.gallery::after {
content: "";
display: table;
clear: both;
}::after додається в кінець .gallery, а clear: both очищає обтікання після всіх плаваючих дочірніх елементів.
Повний приклад:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Float і clear</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px;
font: 16px/1.5 Arial, sans-serif;
background: #f8fafc;
}
.gallery {
max-width: 440px;
margin: 0 auto;
padding: 12px;
border: 2px solid #2563eb;
background: white;
}
.gallery::after {
content: "";
display: table;
clear: both;
}
.tile {
float: left;
width: calc(33.333% - 16px);
height: 100px;
margin: 8px;
background: #bfdbfe;
color: #1e3a8a;
text-align: center;
line-height: 100px;
font-weight: bold;
}
.description {
max-width: 440px;
margin: 20px auto 0;
padding: 16px;
border: 1px solid #cbd5e1;
background: white;
}
</style>
</head>
<body>
<div class="gallery">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
</div>
<p class="description">
Цей абзац починається після галереї, тому що батьківський контейнер правильно
очистив обтікання своїх дочірніх елементів.
</p>
</body>
</html>Інший сучасний спосіб сформувати контейнер, який охоплює плаваючі дочірні елементи:
.gallery {
display: flow-root;
}flow-root створює новий контекст форматування і дає батьківському елементу врахувати плаваючий вміст. У такому випадку псевдоелемент із clear не потрібен:
.gallery {
display: flow-root;
padding: 12px;
border: 2px solid #2563eb;
}float і clearЦі властивості вирішують різні завдання:
float визначає, з якого боку елемент плаває;
clear визначає, з якого боку наступний елемент не може обтікати плаваючі елементи.
Наприклад:
.image {
float: right;
}
.heading {
clear: right;
}Заголовок .heading не буде розташовуватися ліворуч від елемента, що має float: right.
Якщо на сторінці можуть бути плаваючі елементи з обох боків, безпечніше використовувати:
.heading {
clear: both;
}Без відступу текст може візуально прилягати до зображення:
.image {
float: left;
margin-right: 20px;
margin-bottom: 12px;
}clear не на тому елементіclear не змінює положення плаваючого елемента. Він діє на елемент, до якого застосований, і переносить саме цей елемент нижче.
Неправильно очікувати, що:
.image {
clear: both;
}змусить текст обтікати зображення. Для обтікання потрібен float, а для зупинки обтікання — clear на наступному елементі.
Якщо всі дочірні елементи мають float, перевірте, чи охоплює їх батьківський елемент. Для цього можна використати:
.container {
display: flow-root;
}або очищення через ::after.
Якщо секція після плаваючих елементів має починатися з нового рядка, додайте:
.next-section {
clear: both;
}Створіть картку статті, яка містить:
зображення з float: left;
текст, що обтікає зображення;
заголовок наступного розділу з clear: both;
батьківський контейнер, що правильно охоплює плаваючі елементи.
Потім змініть float: left на float: right і скоригуйте відступи, щоб текст не прилягав до зображення.
float: left і float: right розташовують елемент біля відповідного краю контейнера.
Текст та інший рядковий вміст можуть обтікати плаваючий елемент.
margin використовують для створення відстані між плаваючим елементом і текстом.
clear: left, clear: right або clear: both зупиняє обтікання для наступного елемента.
Плаваючі дочірні елементи можуть не формувати очікувану висоту батьківського контейнера.
Для очищення контейнера можна застосувати ::after або display: flow-root.
float відповідає за обтікання, а clear — за припинення обтікання.