HTML, CSS, javascript, PHP

Плавающие элементы (float) выходят за пределы их контейнера, то есть проиходит сворачивание контейнера. Чтобы этого избежать, мы сам контейнер можем сделать плавающим. 

Другой способ решения этого вопроса - задать контейнеру класс clearfix.

Сам класс clearfix выглядит так:

.clearfix:after {
     content: " ";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
     font-size: 0;
}


/* for IE6 */
* html .clearfix{
     height:1%;
}

/* for IE7 */
*:first-children+html .clearfix{
     min-height:1px;
}

Или другой способ, самим после плавающего элемента добавить:

<div class="clr"><!-- clr --></div>

где clr

.clr{
     clear:both;
}