Нужен ли float в 2026м году?

15.02.2026 • css

Вступление

Достаточно давно вёрстка “флоатами” была модным способом сделать рядовые вещи. Конечно, это был своего рода хак, и с тех пор в браузерах появилось много способов сделать то же самое, более прямолинейно и без болезненных спецэффектов.

Вспомним, зачем флоаты были придуманы изначально, что делали на пике их использования, и попробуем понять их место в 2026м году.

Первоначальное назначение

Интернет начинался с достаточно простого контента: текстовые статьи, ссылки, заголовки. Через какое-то время появились картинки.

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

Пример

У float два основных значения: left и right. Текст (и другие инлайновые элементы) будут обтекать элементы с float, а сами “плавающие” элементы выпадают из блочной модели.

Вёрстка “флоатами”

Что будет, если расположить несколько элементов “слева” или “справа” подряд? Они будут вставать друг за другом:

Пример

Во времена, когда не было флексбоксов, гридов, да и что там, когда даже полноценно display: inline-block использовать было нельзя, флоаты позволяли расположить элементы горизонтально. Вторым популярным способом в те времена были таблицы, однако флоаты могли сделать перенос, похожий на flex-wrap:

Пример

Проблемы

Вёрстка флоатами были “костылём”, так как такого использования не предполагалось изначально. Подход приводил к проблемам, с которыми научились жить.

clearfix

Как уже говорилось выше, флоаты “вытаскивают” элемент из обычного потока. Более того, это приводит к тому, что элементы могут вываливаться за пределы родительского блока:

Пример

parent

float

Для решения этой проблемы чаще всего использовался подход, который назывался clearfix. Благодаря свойству clear можно было заставить обычный элемент гарантированно занять позицию после “плавающего”. Если расположить такой элемент после всех флоатов, то это позволит “растянуть” родительский элемент, чтобы ничего не вываливалось:

.clearfix {
    clear: both;
}

Пример

parent

float

clearfix

Странная логика переносов

Перенос флоатов работал совсем не так, как работает перенос во флексбоксах. По сути, “плавающий” блок пытался найти место по верхней линии контента родительского блока. Если же места по горизонтали не хватало, то по нижней границе предыдущего флоата. Это могло порождать весьма любопытные (и неожиданные) лейауты:

Пример

Модернизация флоатов

Флоаты появились очень давно, и за прошедшее время нашлось несколько улучшений, которые были применены к первоначальной идее.

Логические значения

Видя float: left / right, встаёт вопрос про RTL (right-to-left). Ведь если мы хотим сделать выравнивание картинки по началу текста, то значение нужно будет менять в зависимости от направления текста.

К счастью, эта проблема была решена в виде значений float: inline-start / inline-end:

img {
    float: inline-start;
}

Пример

LTR RTL

Произвольные формы для обтекания текста

Свойство shape-outside развивает идею обтекания текстом какой-либо фигуры:

img {
    float: left;
    shape-outside: circle(50%);
}

Пример

Можно использовать готовые примитивы, произвольные полигоны и даже внешние изображения.

float в современном CSS

Давайте выйдем за пределы float и посмотрим, что будет при взаимодействии с другими раскладками.

1) position.

При использовании position: absolute float отключается, тут ничего интересного.

С position: relative всё работает, и таким образом можно подвинуть плавающий элемент в сторону. Инлайновые элементы продолжают “обтекать” старое положение элемента, без учёта position: relative.

position: sticky тоже работает. Если элемент смещается правилом position: sticky, то обтекающие элементы продолжают обтекать его старую позицию. Тем самым не получится сделать “расталкивание” элементов по мере скролла.

Пример

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio adipisci ipsum expedita itaque sapiente eveniet voluptate amet nihil! Laudantium voluptatibus, temporibus odio tempora amet sit est animi culpa esse voluptas. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, ratione rem consequatur sequi ab cumque ex, harum vero quasi corrupti id rerum? Enim, sapiente voluptate. Impedit eaque voluptatem porro neque?

2) display: flex / grid

Если родительский элемент float – flex или grid, то float просто не работает.

3) columns

Многоколоночная раскладка работает как раз с текстом, поэтому не удивительно, что float работает в ней. Из интересного можно отметить, что элементы с float могут быть “разрезаны” и расположены между несколькими колонками:

Пример

float

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

4) anchor-positioning

Флоаты дружат с anchor-positioning и, к примеру, можно сделать тултип к “плавающему элементу”:

Пример

Итого

Флоаты сегодня – редкий зверь на просторах HTML-лесов. И, мне кажется, вполне заслуженно. Он всё ещё полезен для случаев, когда нам нужно получить обтекание текстом какой-либо фигуры. Однако за пределами этого специфичная логика раскладки флоатов с трудом находит применение. Пик популярности float прошёл, и на замену ему пришли другие раскладки, которые лучше справляются с обязанностями, которые были взвалены в своё время на float.

Обсудить в Telegram