НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності

CSS Продвинутий

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Підгонка об'єкту CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

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 українською.


Зображення одне за одним

Italy
Forest
Mountains

Сітка блоків також може використовуватись для відображення зображень поруч:

Приклад

.img-container {
  float: left;
  width: 33.33%; /* три контейнера (використовуйте 25% для чотирьох та 50% для двох і т.д.) */
  padding: 5px; /* якщо ви хочете простір між зображеннями */
}
Спробуйте самі »

Блоки однакової висоти

В попередньому прикладі ви дізнались, як розміщувати блоки один біля одного з однаковою шириною. Однак створити плаваючи блоки однакової висоти непросто. Але є швидке рішення - встановити фіксовану висоту, як в прикладі нижче:

Блок 1

Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент

Блок 2

Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент

Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент

Якийсь контент, якийсь контент. Якийсь контент, якийсь контент. Якийсь контент, якийсь контент

Приклад

.box {
  height: 500px;
}
Спробуйте самі »

Однак це не дуже гнучкий варіант. Це нормально, якщо ви можете гарантувати, що в блоках завжди буде однакова кількість змісту. Але часто зміст не однаковий. Якщо ви спробуєте наведений вище приклад на мобільному телефоні, ви побачите, що зміст другого вікна буде відображатися за межами поля. Тут знадобиться CSS3 Flexbox - він може автоматично розтягувати блоки до розміру найдовшого блоку:

Приклад

Використання Flexbox для створення гнучких блоків:

Блок 1 - Це текст, щоб переконатися, що контент стає дійсно високим. Це текст, щоб переконатися, що контент стає дійсно високим. Це текст, щоб переконатися, що контент стає дійсно високим.
Блок 2 - Моя висота буде відповідати Блоку 1.
Спробуйте самі »

Єдина проблема із 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 Визначає, що робити з верхніми / нижніми краями змісту, якщо вони виходять за межі області змісту елементу