У цьому уроці я коротко торкнуся такої речі як плаваючі блоки. Взагалі. за допомогою плаваючих блоків можна створювати різні ефекти і навіть дизайн сторінок, т.зв. блоковий дизайн. Більшість сучасних сайтів будуються саме за блоковим принципом. Тому, мені здається. що дуже важливо розібратися як це працює!
Отже, Плаваючі блоки в CSS визначаються властивістю float.
Дана властивість визначає, чи буде блок плаваючим і в який бік він буде переміщатися. Властивість може набувати таких значень.
- left - структурний блок переміщується вліво. Інша частина документа буде виводитися вздовж правого боку блоку, починаючи з самого верху.
- right - структурний блок переміщується вправо. Інша частина документа виводиться вздовж лівого боку блоку, починаючи з самого верху.
- none - блок не переміщається (значення за замовчуванням).
Ну от наприклад, як будуть розташовуватися за замовчуванням, три квадратних блоку, зі стороною в 200 пікселів.
Як бачите, за замовчуванням кожен наступний блок, знаходиться під попереднім.
Використовуючи властивість float можна зробити так, щоб кожен блок спливав вліво, тобто це буде виглядати так:
Ось як буде виглядати, якщо блоки будуть спливати вправо:
Класичний приклад застосування - це коли треба зробити щоб текст виводився в колонках. Нехай колонки буде три.
В html-коді просто укладемо необхідний текст до відповідних колонки, тегами DIV
There is one universal truth in website making: To make a websitet.
If you're like the vast majority of people thinking.
There is one universal truth in website.
Говорячи про плаваючі блоках, необхідно згадати також про властивості CLEAR- специфічна властивість, що дозволяє певним чином позиціонувати плаваючі блоки.
- left - блок повинен розміщуватися нижче всіх лівосторонніх плаваючих блоків.
- right - блок повинен розміщуватися нижче всіх правобічних плаваючих блоків.
- both - блок повинен розміщуватися нижче всіх плаваючих блоків.
- none - ніяких обмежень на положення блоку щодо переміщуваних об'єктів не накладається.
Ну припустимо є два плаваючих вліво блоку (float: left;), які обтікає текст.
Якщо укласти весь текст в блок, і надати йому властивість CLEAR: BOTH тобто щоб він розміщувався нижче всіх плаваючих блоків, можна позбутися від обтікання блоків текстом.
There is one universal truth in website.
Зауважте, що в блоках може знаходиться що завгодно (картинки, списки, текст та ін.)
Ось Вам ще один приклад, коли один блок розташовується під іншим, і обидва блоки обтекаются текстом.
There is one universal truth in website.
Загалом варіантів застосування може бути багато. Експериментуйте, якщо хочете.
Якщо хочете подивитися, як використовувати плаваючі блоки для створення каркаса сайту, Вам сюди.