CSS - Робота з плаваючими елементами, ІТ Шеф
Плаваючі елемент - це блоковий елемент, у якого встановлено CSS властивість float зі значенням left або right . Розташовується плаваючий елемент наступним чином: він відкріплюється від свого поточного місця (поточне місце - це місце, яке займав би блоковий елемент, якщо він був би плаваючим) і розташовується по вертикалі (верхня межа плаваючого елемента вирівнюється по верхній межі поточного рядка) і горизонталі (залежно від значення властивості float плаваючий елемент буде прикріплюватися наскільки можливо до лівого або правого краю батьківського елемента). Решта вмісту, розташованого після плаваючого елемента в цьому контейнері, обтікає цей плаваючий елемент з протилежного боку. Місце, яке він займав би, якби не був плаваючим, не закріплюється за ним, і його місце займатиме елементи контейнера, розташовані після плаваючого елемента. Також необхідно враховувати, що висота плаваючого блоку не впливає на висоту блоку контейнера, в яку він поміщений.
Наприклад: висота контейнера, в який поміщений тільки плаваючий блок дорівнюватиме 0.
Розглянемо розташування плаваючих блоків з прикладу. Для початку створимо 3 блоки з різним фоном і розмістимо їх у контейнері, який має висоту 350px та внутрішні відступи з кожної сторони (padding) по 20px. За замовчуванням блокові елементи будуть займати всю ширину контейнера і розташовуватися один під одним.
Тепер за допомогою властивості float змінимо 2 блок на плаваючий та встановимо йому ширину рівну 120px. Завдання ширини плаваючих блоків є обов'язковою умовою. Після зміни блоковий елемент 3 став обтікати плаваючий блок протилежного боку.
Тепер змінимо висоту блокового елемента 3 і помітимо,що після обтікання плаваючого елемента блоковий елемент 3 вирівнюється лівим краєм.
Тепер і 1 блок зробимо плаваючим, додатково встановивши йому ширину 120px та висоту 150px. 2 плаваючий блок (червоний) прагнутиме прикріпитися наскільки можливо до лівого краю батьківського елемента, але 1 блок йому заважатиме, отже, він прикріпиться до правого краю 1 блоку.
Примітка: Коли плаваючим елементам не вистачатиме ширини контейнера, вони переміщатимуться вниз.
Способи скасування обтікання
Плаваючі блоки дуже часто застосовуються під час верстки веб-сторінок. Однак бувають ситуації і досить часто, коли необхідно скасувати блок обтікання з однієї або з двох сторін. Існує кілька способів як це зробити:
-
За допомогою CSS властивості clear , яке має значення left (скасовує обтікання з лівого краю елемента), right (скасовує обтікання з правого краю) або both (скасовує обтікання елемента одночасно з лівого та правого країв). Залежно від ситуації, цю властивість можна застосувати безпосередньо до блоку або створити порожній блок div з властивістю clear і відповідним значенням. Наприклад: