13.01.2016

Как избавиться от схлопывания контейнера с float

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

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

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

.clearfloat:after {
	content: "";
	display: table;
	clear: both;
}