CSS Макет - Приклади Float
Ця сторінка містить загальні приклади з float.
Сітка блоків / Блоки однакової ширини
Блок 1
Блок 2
Блок 1
Блок 2
Блок 3
За допомогою властивості float можна легко розміщувати блоки зі змістом поруч один біля одного:
Приклад
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* три блоки (використовуйте 25% для чотирьох та 50% для двох і т.д.) */
padding: 50px; /* якщо ви хочете простір між зображеннями */
}
Спробуйте самі »
Що таке box-sizing (розмір блоку)?
Ви можете легко створити три плаваючих блока поруч. Однак, коли ви додаєте щось, що збільшує ширину кожного блоку (наприклад, відступи або межі), блок руйнується. Властивість box-sizing дозволяє включати відступ та межу в загальну ширину (і висоту) поля, слідкуючи за тим, щоб відступи залишалися всередині поля і не руйнували блок.
Ви можете дізнатись більше про властивість box-sizing в розділі CSS box-sizing на нашому сайті W3Schools українською.
Зображення одне за одним
Сітка блоків також може використовуватись для відображення зображень поруч:
Приклад
.img-container {
float: left;
width: 33.33%; /* три контейнера (використовуйте 25% для чотирьох та 50% для двох і т.д.) */
padding: 5px; /* якщо ви хочете простір між зображеннями */
}
Спробуйте самі »
Блоки однакової висоти
В попередньому прикладі ви дізнались, як розміщувати блоки один біля одного з однаковою шириною. Однак створити плаваючи блоки однакової висоти непросто. Але є швидке рішення - встановити фіксовану висоту, як в прикладі нижче:
Блок 1
Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент
Блок 2
Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент
Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент
Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент
Однак це не дуже гнучкий варіант. Це нормально, якщо ви можете гарантувати, що в блоках завжди буде однакова кількість змісту. Але часто зміст не однаковий. Якщо ви спробуєте наведений вище приклад на мобільному телефоні, ви побачите, що зміст другого вікна буде відображатися за межами поля. Тут знадобиться CSS3 Flexbox - він може автоматично розтягувати блоки до розміру найдовшого блоку:
Приклад
Використання Flexbox для створення гнучких блоків:
Єдина проблема із Flexbox полягає в тому, що він не працює в Internet Explorer 10 та більш ранніх версіях. Ви можете дізнатись більше про модуль макета Flexbox в розділі CSS Flexbox на нашому сайті W3Schools українською.
Меню навігації
Використовуйте float зі списком гіперпосилань, щоб створити горизонтальне меню:
Приклад веб-макета
Також часто роблять веб-макети цілком за допомогою властивості float:
Приклад
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
Спробуйте самі »
Більше прикладів
Зображення з межею і полями, яке розташовується праворуч в параграфі
Нехай зображення переміщується вправо в параграфі. Додайте межу і поля до зображення.
Зображення з підписами, які розташовуються праворуч
Нехай зображення з підписом розташовується праворуч.
Нехай перша літера параграфа розташовується ліворуч
Нехай перша літера параграфа розташовується ліворуч та літера придбаває стиль.
Створення вебсайту за допомогою float
Використовуйте float для створення домашньої сторінки з панеллю навігації, заголовком, нижнім колонтитулом, змістом ліворуч і основним змістом.
Всі CSS властивості Float
| Властивість | Опис |
|---|---|
| box-sizing | Визначає, як розраховуються ширина і висота елемента: чи мають вони містити відступи та межі або ні |
| clear | Визначає, які елементи можуть плавати поруч з очищеним елементом і з якого боку |
| float | Визначає, як елемент має плавати |
| overflow | Визначає, що відбувається, якщо зміст виходить за межі поля елемента |
| overflow-x | Визначає, що робити з лівим / правим краями змісту, якщо воно виходить за межі області змісту елементу |
| overflow-y | Визначає, що робити з верхніми / нижніми краями змісту, якщо вони виходять за межі області змісту елементу |
