Плавающие элементы — CSS: Позиционирование элементов

Разобравшись с правилом 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:

See the Pen css_positioning_float_clear by Hexlet (@hexlet) on CodePen.

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

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

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

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

main {
  clear: left;
}

See the Pen css_positioning_float_clear-1 by Hexlet (@hexlet) on CodePen.

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

main {
  clear: right;
}

See the Pen css_positioning_float_clear-1 by Hexlet (@hexlet) on CodePen.

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

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

.clear-right {
  clear: right;
}

See the Pen css_positioning_float_clear-2 by Hexlet (@hexlet) on CodePen.

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты