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%; }
Оригинал статьи: http://www.webtoolkit.info/css-clearfix.html