плаваючі елементи tutorial


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

Якщо зафіксувати ширину елемента за допомогою властивості width , То можна задати обтікання цього елемента іншими. Це властивість має назву float , Оскільки створюється враження, що елемент " плывет "В середовищі інших елементів - вліво або вправо. Тобто, у цієї властивості два основних значення - left або right . при значенні left елемент притискається до лівого краю, а обтікання іншими елементами відбувається по правому його краю. при значенні right - все навпаки. Відзначимо, що для цього необхідно задати ширину елемента. також float може приймати значення none - воно встановлено за умовчанням.



Ми бачимо, що текст поза блоком розташований праворуч від нього. При відсутності правила float:left цей текст розташовувався б під блоком - згідно властивостей блокових елементів.

Для того, щоб скасувати обтікання, досить вставити елемент з правилом clear: both після елемента з правилом float . властивість clear нівелює обтічність для елементів, зазначених після нього. значення both означає, що буде скасована будь-яка обтічність - зліва чи справа. властивість clear може також приймати значення left або right - для скасування однойменного значення властивості float . Це правило часто використовується для вставки порожнього рядка між двома плаваючими елементами.



Властивість float має свої особливості, які можуть привести до несподіваних результатів. Однією з них є наступна ситуація. Припустимо ми помістили один блок в інший, причому внутрішній блок має правило float: left



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

overflow: hidden;


в блок bar :

Проверьте свои знания
Створити стильові правила для класу flower, при яких елемент буде "плисти" вправо. Створити такі стильові правила для тега img всередині блоку цього класу: висота 50px; зовнішні відступ зліва 50px. використовуючи малюнок вставити блок flower з малюнком в header так, щоб він притискався до лівої кордоні header. Тег малюнка повинен бути поміщений в блок класу flower. Файл малюнка помістити в папку img в корені проекту. Створити тег форми. Усередині блоку contact-form перед формою вставити заголовок з текстом Contact Form, колір тексту # 403E3F.