Плавающие элементы

Разобравшись с правилом position, мы переходим к следующему типу потока документа — плавающий поток. Его характерная черта — обтекание элементов. Это легко понять на примере журнальной вёрстки. Наиболее частой в ней является схема, когда внутри текста находится картинка, но не просто между строками текста, а слева или справа от него. Текст в данном случае как бы обтекает изображение, отсюда и такое название.

Для того, чтобы сменить поток на плавающий, используется CSS правило float, которое принимает два основных значения:

• left
• right

По таким значениям ясно, что элемент может обтекаться как слева, так и справа. Попробуйте в примере выше сменить правило float: left на float: right, чтобы понять разницу. Для хорошего отображения также нужно будет "отзеркалить" отступы. То есть margin-right сменить на margin-left.

При использовании плавающего потока происходит необычная реакция браузера: на самом деле блок выдёргивается из нормального потока документа. Точно также, как и с использованием абсолютного позиционирования. Но почему блок рядом с плавающим элементом не наезжает на него? На самом деле наезжает, но текст "знает" о том, что рядом с ним плавающий элемент и поэтому браузер автоматически "сдвигает" текст к границе плавающего элемента.

Такой эффект легко увидеть, если использовать свойство opacity, которое устанавливает прозрачность элемента, и отступ внутри блока.

До недавнего времени float использовали как основной инструмент для вёрстки сайтов. Именно с помощью этого правила создавали различные макеты в 2-3 колонки. Так как float изначально не создавался для таких целей, то этот процесс доставлял достаточно много проблем. С приходом flex и grid необходимость использовать плавающий поток для вёрстки макетов отпала, а значит его можно использовать для изначальных целей, а именно вёрстки текстов.

Интересной особенностью свойства float является то, что при его использовании любой элемент автоматически становится блочным. Это важно, если свойство используется на строчных элементах, таких как span. После установки значения float элементу можно выставлять значения ширины и высоты без дополнительного использования свойства display.

float может вносить много головной боли при вёрстке сайта. Зачастую мы хотим, чтобы блок обтекали только отдельные элементы, а не все из потока. Для примера возьмём три блочных элемента, два из которых должны стоять в одну строку, а третий - располагаться под ними. Попробуем использовать свойство float.

Чтобы перенести футер под основной контент сайта, используется так называемая "очистка плавающего потока". После "очистки" все блоки игнорируют плавающий поток, а нижележащие элементы начинают вести себя в соответствии с нормальным потоком документа, если у них не указано другое поведение.

Для того, чтобы очистить плавающий поток, используется свойство clear, которое может принимать следующие значения:

• left. Очистка плавающего потока слева
• right. Очистка плавающего потока справа
• both. Очистка плавающего потока слева и справа. Это значение используется наиболее часто.

Есть несколько основных способов, как реализуется clear:

1. Использование правила clear: both для элемента, который необходимо "очистить".
2. Создание пустого блочного элемента. У него впоследствии указывается правило clear: both.
3. Использование метода clearfix. Для этого у элемента, после которого требуется очистка указывается правило clear: both в псевдоклассе after.

<style>
  .main:after {
    content: "";
    clear: both;
    display: table;
  }

  .img-float {
    float: left;
  }
</style>

<div class="main">
    <img src="#" class="img-float">
    <p>Текст</p>
</div>

<footer></footer>

Теперь блок footer будет расположен под блоком main.

Наиболее распространённым вариантом использования clear является создание пустого блочного элемента, у которого установлено правило clear: both. Вторым вариантом является использование правила clear у блока, который необходимо "очистить".