Плавающие элементы онлайн урок.


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

Если зафиксировать ширину элемента при помощи свойства 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.