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


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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

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

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

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

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

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

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

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

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

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

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»