Разобравшись с правилом 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, которое может принимать следующие значения:
Есть несколько основных способов, как реализуется clear:
clear: both
для элемента, который необходимо «очистить».clear: both
.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
у блока, который необходимо «очистить».
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт