Обтікання елементами інших елементів

Властивість float

Властивість float керує процесом обтікання одного елемента іншим.

Має такі значення:

none — немає обтікання, тобто елементи розташовуються один під одним.
left — елемент розташовується зліва і обтікається наступними плаваючими елементами справа.
right — елемент розташовується справа і обтікається наступними плаваючими елементами зліва.

Значення float має сенс лише, якщо застосовується до елемента з явно заданою шириною (width).

Задавши це властивість, всі наступні елементи будуть плаваючими. Усі елементи будуть плаваючими, доки обтікання не буде скасоване властивістю clear.

Демонстрація використання CSS Float

 <style>
 .img-left {
            float: left;
            margin: 0 20px 10px 0;
            width: 200px;
            border: 3px solid #3498db;
            border-radius: 5px;
        }
        
        .img-right {
            float: right;
            margin: 0 0 10px 20px;
            width: 200px;
            border: 3px solid #e74c3c;
            border-radius: 5px;
        }
        
        .img-center {
            display: block;
            margin: 20px auto;
            width: 300px;
            border: 3px solid #2ecc71;
            border-radius: 5px;
        }
		</style>

Обтікання зліва

Це демонстрація обтікання тексту навколо зображення, яке вирівняне по лівому краю. Властивість float: left дозволяє тексту обтікати зображення з правого боку. Зверніть увагу, як текст заповнює простір праворуч від зображення.

Float використовується для розміщення елемента з лівого або правого краю контейнера, дозволяючи іншим елементам (наприклад, тексту) обтікати його. Це корисно для створення газетного макету, де зображення розташовані збоку від тексту.

Обтікання справа

Тут ми бачимо обтікання тексту навколо зображення, яке вирівняне по правому краю. Властивість float: right розміщує зображення праворуч, а текст обтікає його з лівого боку.

При використанні float важливо пам'ятати про очищення потоку (clearfix), щоб наступні елементи не продовжували обтікати плаваючий елемент. У цьому прикладі ми використовуємо клас .clearfix для коректного відображення.

Комбінація обтікання

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

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

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

Зображення без float

Для порівняння, це зображення не має властивості float. Воно відображається як блоковий елемент з автоматичними полями (margin: auto), що центрує його на сторінці. Текст не обтікає це зображення, а відображається вище та нижче нього.

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

Примітка: У сучасному веб-дизайні для створення складних макетів часто використовують Flexbox або CSS Grid. Однак float все ще корисний для простих випадків обтікання тексту навколо зображень або інших елементів.

Як прибрати обтікання (float) в CSS

Коли ви використовуєте float для елементів, часто виникає потреба "очистити" обтікання. Ось основні способи:

1. Використання clearfix

Додайте clearfix-клас до батьківського елемента:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Float left

Текст обтікає плаваючий елемент. Щоб прибрати обтікання, додамо clearfix.

Тепер текст після clearfix не обтікає.

2. Властивість clear

Додайте елемент з clear: both після плаваючих елементів:

<div style="float: left;">...</div>
<div style="float: right;">...</div>
<div style="clear: both;"></div>

3. Властивість overflow

Використовуйте overflow: auto або overflow: hidden для батьківського елемента:

.parent {
  overflow: auto; /* або hidden */
}

4. Flexbox або Grid

Сучасні альтернативи замість float:

.container {
  display: flex; /* або display: grid */
}

5. Скидання float для окремого елемента

Якщо потрібно скасувати float для конкретного елемента:

.no-float {
  float: none;
  clear: both;
}