Проблема схлопывания при float: left

Есть несколько способов борьбы со схлопыванием родительского блока.
Пример проблемы

Обновлено^(20.7.12): классический clear_fix заменен на group

Нулевой - задавать размеры родительского блока с помощью свойств widht height
Пример 0

Первый - добавить ему свойство overflow: hidden; Часто этого хватает. Исключение составляют случаи, когда необходимо, чтобы дочерний блок выходил за пределы родительского. Свойство overflow: hidden обрезает все, что находится за пределами родительского блока.
Пример 1

Второй - перед закрытием родительского блока, добавлять пустой блок:
<div class="clear"></div>
Пример 2

Третий - использование clear fix
Берем из CSS-Tricks:

/* Clear */
.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

Вот что получилось:
Пример 3

Четвертый - воспользоваться свойством display: inline-block
Пример 4 или так Пример 4.2

Каждый метод имеет свои достоинства и недостатки.