Урок 16. Властивість float

Відео: Уроки по CSS / CSS3. Частина 12. Плаваючі елементи (float) і clearfix

Здрастуй, шановний читачу.

Це шістнадцятий урок вивчення CSS. У цьому уроці ми розглянемо важливе властивість CSS, таке як float. Також ми створимо каркас сайту на основі даного властивості.

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку
Урок 12. Конфлікти полів
Урок 13. Робота з зображеннями. Частина 1
Урок 13. Робота з зображеннями. Частина 2
Урок 14. Таблиці
Урок 15. Форми

Теорія та практика

Властивість, яке ми вивчимо в даному уроці дуже важливо для подальшого розуміння всієї роботи з шаблонами для сайтів. Дана властивість, як я вже писав на початку статті відповідає за обтікання. В html ви вже вивчали приклад обтікання на прикладі зображень - Перейти.

Властивість float на прикладі зображення

Для прикладу візьмемо таку html сторінку:

1234567891011121314

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content"gt;lt;img src="Bear.jpg" class="ForImg" width="350" height="253" alt="Ведмідь"gt;lt;pgt; Nullam arcu libero, consequat ac libero in, consequat feugiat leo. Fusce semper nibh sit amet leo adipiscing suscipit. Donec a lectus condimentum, tincidunt eros in, pretium enim.lt;/pgt;lt;pgt; Vivamus fringilla posuere erat, sed eleifend dolor tempus a. Duis tristique ullamcorper diam, at convallis nibh pulvinar tincidunt.lt;/pgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

Відео: Урок 15 - Властивість float

Зараз ми маємо таку сторінку:

І потім змінюючи значення у властивості float маємо зображення як нам треба. Застосуємо обтікання зліва:

123

.forImg{float:left-}

Як це виглядає в браузері:

Відео: Курс HTML і CSS - Стилізація footer сайту за допомогою css [Урок 16]

А зараз можна застосувати обтікання справа:

123

.forImg{float:right-}

Як це виглядає в браузері:

Як бачите це дуже схоже на обтікання, яке ми застосовували в html. Але це лише візуально здається що воно схоже. Насправді даний блок «підводиться» над іншими, а контент обтікає по контуру зображення. Щоб стало зрозуміліше представляю вам зображення:

Отже, на цьому все. Даний урок є дуже простим і ви без праці його подужаєте. У наступному уроці ми створимо каркас сайту на основі даного властивості. І ви побачите що все дуже легко і просто. Обов`язково спробуйте дане властивість на практиці.