Создание плавающих контейнеров при помощи float
Изначально элементы веб-страницы располагаются на ней один за другим в том порядке, в котором они определены в html-коде. Помещая теги для абзацев, заголовков, списков и т.д. На странице в коде, мы видим их в том же порядке. Но с помощью некоторых атрибутов CSS мы можем изменить этот порядок. Один из них плывет.
Правило плавания позволяет нам создавать так называемые поплавки. То есть мы можем настроить элемент блока, который будет выровнен по левому или правому краю родительского элемента (контейнера блока, в который он вложен, или самой веб-страницы). Это вложит элемент блока в соответствующий край его родителя, а остальное содержимое будет обтекать его с противоположной стороны. Мы уже видели это в чистом HTML, когда рассматривали атрибут align со значениями left и right для тега img, который используется для вставки изображений на веб-страницу.
У этого правила есть три возможных значения:
поплавок: слева | право | нет | наследование
По умолчанию float использует значение none, что означает, что элементы не имеют оболочки и находятся в порядке один за другим.
Значения left и right выравнивают элемент веб-страницы слева и справа от родительского элемента соответственно, а остальное содержимое будет обтекать его с противоположной стороны.
Рассмотрим два блочных элемента. Для начала выделите их другим цветом фона, используя правило фона:
Вот как они обычно себя ведут:
А теперь для первого div напишем правило float с левым значением и установим поля, используя свойство margin для наглядности его взаимодействия со смежным тегом:
Как видите, первый div начал выравниваться по левому краю, а содержимое соседнего элемента жира обернулось вокруг него с правой стороны.
Когда правило с плавающей запятой применяется к встроенным элементам, встроенные элементы начинают вести себя как блочные элементы при взаимодействии с другими элементами на веб-страницах. Так, например, в обычных ситуациях правила высоты и ширины для встроенных элементов не работают. Но после применения атрибута float параметры размера сразу начинают принимать значения.
Давайте добавим элемент span к предыдущим примерам и назначим ему размеры в стилях:
Расширение содержимого встроенного элемента
На рисунке показано, что правила ширины и высоты для пролета не работали, и его размеры стали такими же в зависимости от его содержимого.
Теперь давайте добавим правило с плавающей запятой к элементу span со значением слева:
Расширение содержимого встроенного элемента
Теперь элемент span приобрел размеры в соответствии с правилами css, и соседние элементы начали обертывать его с правой стороны. Из этого можно сделать вывод, что правило плавания может применяться как к встроенным, так и к блочным элементам. Кроме того, независимо от того, к какому элементу применяется правило, оно становится блочным.
Но что, если вы установите одинаковое значение для атрибута стиля float для нескольких последовательных элементов? Мы видим:
Расширение содержимого встроенного элемента
Они будут выстраиваться по горизонтали один за другим в том порядке, в котором они написаны в html-коде, и выровняться до указанного края родительского элемента.
Следует отметить, что правило плавания применяется к макету блока на основе плавающих контейнеров. При таком дизайне часто бывает необходимо разместить несколько элементов под теми, которые выровнены по левому или правому краю. Если вы просто удалите из них правило стиля с плавающей запятой или установите для него значение none, результат будет непредсказуемым. В этом случае на помощь приходит четкое правило.