Clearfix без дополнительного div: таблица и clear на псевдоэлементе

Разбор задачи

Все ни один раз сталкивались с проблемой, когда в контейнере содержатся только элементы с float, будь то div’ы, li или a, то контейнер схлопывается в нулевой, то есть так, как будто в нем нет никакого контенета.

Самый простой способ — это добавит внизу перед закрытием контейнера div со стилем clear:both, но это не всегда удобно в верстке сайта. И вот Nicolas Gallagher предложил отличное решение, которое поможет избежать засорения кода лишними div и схлопыванию вашего блока.

Теперь можно добавлять класс clearfloat для всех элементов, которые схлопываются из-за того, что внутри только float’ы.

.clearfloat:after { content: ""; display: table; clear: both; } Нам будет приятно

.clear-float-root::after {
	content: "";
	display: table;
	clear: both;
}

Замечания перед выкладкой

Правки через контролируемую среду и с версионированием. Для статей-бэкенда проверяйте включённые модули и права; для чистых CSS-сниппетов — консоль браузера и отсутствие конфликтов с утилитарными классами основного шаблона проекта на Битрикс.