Clearfix

Решение проблемы прорисовки float элементов внутри контейнера

Проблема проявляется когда float элемент находится внутри контейнера и автоматически не принимает его высоту.
Поскольку элемент — float то он физически перестает находиться внутри родителя что соответственно приводит к описыной выше ситуации.
Вы можете использовать два следующих метода чтобы это исправить:

• {clear: both;}
• clearfix

Как только вы поймете что собственно происходит — используйте данный метод для исправления ситуации.

Исходный код для webtoolkit.clearfix.css

.clearfix:after { 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	line-height: 0; 
	height: 0; 
} 
 
.clearfix { 
	display: inline-block; 
} 
 
html[xmlns] .clearfix { 
	display: block; 
} 
 
* html .clearfix { 
	height: 1%; 
}