Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Плавающие элементы 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.

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

Для того, чтобы очистить плавающий поток, используется свойство 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 у блока, который необходимо «очистить».


Аватары экспертов Хекслета

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

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

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
с нуля
Разработка фронтенд-компонентов для веб-приложений
2 февраля 10 месяцев
Иконка программы Онлайн-буткемп. Фронтенд-разработчик
Профессия
Новый с нуля
Интенсивное обучение профессии в режиме полного дня
9 февраля 4 месяца
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
2 февраля 16 месяцев
Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»