Если видео недоступно для просмотра, попробуйте выключить блокировщик рекламы.

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

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

  • left
  • right

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

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

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →