Теория: Плавающие элементы

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

https://codepen.io/hexlet/pen/LYPdpxv

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

• left
• right

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

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

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

https://codepen.io/hexlet/pen/BaBvXXe

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

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

https://codepen.io/hexlet/pen/oNvJKew

Очистка плавающего потока

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

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

https://codepen.io/hexlet/pen/BaGopLN

Изучите вёрстку этого компонента и посмотрите, где располагаются разные блоки.

Если нужно запретить плашкам входить внутрь текста, то используется свойство clear. Оно устанавливается у элемента, который обтекает блок. Свойство принимает три основных значения:

• left — запретить обтекать блок слева
• right — запретить обтекать блок справа
• both — запретить обтекать блок со всех сторон

Запретим обтекать статью слева. Для этого блоку <main> установим свойство clear: left:

main {
  clear: left;
}

https://codepen.io/hexlet/pen/GRwprYp

Если повторить это же действие, но для правого блока, то ничего не сработает:

main {
  clear: right;
}

https://codepen.io/hexlet/pen/oNQjZNv

Эффект не сработал, потому что блок со свойством float находится внутри статьи, а значит обтекается не весь блок, а только его часть. В этом случае свойство устанавливается у того элемента, который обтекает этот элемент. В примере это параграф. Установим свойство для него:

<p class="clear-right">Также у PHP недавно появились альтернативные рантаймы (среды выполнения), типа RoadRunner. Они позволяют срезать расходы ресурсов компаний на инициализацию приложения — на настройку и запуск всех необходимых библиотек и фреймворков.</p>

.clear-right {
  clear: right;
}

https://codepen.io/hexlet/pen/OJaypPp