Главная > Статьи > CSS свойства float и clear - как сделать обтекание блока и очистку обтекания

CSS свойства float и clear - как сделать обтекание блока и очистку обтекания

2025

При размещении элементов на странице часто бывает необходимость сделать обтекание одного блока другим. Для этого в CSS есть специальное свойство – float. Начинающему разработчику обычно бывает непонятно как работает это свойство, но с практикой это исправляется. Важно понимать, что после применения свойства бывает также необходимо выполнять очистку обтекания, чтобы другие элементы не обтекались.

css-float-clear

Немного предыстории. Раньше, чтобы разместить один элемент слева или справа другого, в основном использовались таблицы. Но такой подход устарел, верстка стала делаться при помощи div блоков и поэтому для них придумали новое свойство – float.

Какие значения имеет данное свойство? Их немного:

left - является ключевым словом, указывающим, что элемент должен плавать в левой части его содержащего блока;
right - является ключевым словом, указывающим, что элемент должен плавать с правой стороны его содержащего блока;
none - является ключевым словом, указывающим, что элемент не должен плавать;
inherit – наследуется родительское значение.

Как было сказано выше, после применения свойства float может понадобиться отменить его действие – сделать очистку обтекания. Это можно сделать при помощи свойства clear, оно создано как раз для этого.

Какие значения можно указать у clear? Посмотрим ниже:

left - указывает, что элемент будет перемещен вниз, чтобы очистить обтекание с левой стороны;
right - указывает, что элемент будет перемещен вниз, чтобы очистить обтекание с правой стороны;
both - указывает, что элемент перемещается вниз, будет очищено обтекание как с левой стороны, так и с правой;
none – не отменяет обтекания, может понадобиться в некоторых случаях;
inline-start - указывает, что элемент перемещается вниз для очистки обтекания в начале содержащего его блока, то есть будет очищено левое обтекание для текста с направлением текста слева-направо и правое обтекание для текстов с направлением текста справа-налево;
inline-end – аналогично предыдущему значению, только наоборот.

Таким образом, мы рассмотрели, как выполнить обтекание элемента слева или справа, а также как сделать очистку обтекания при помощи специального свойства.