Clearing Floats — почему это важно даже в современных браузерах?

Контент, помеченный свойством float будет выровнен по указанной стороне, при этом остальные элементы будут обтекать его с другой.
Чтобы запретить обтекание элемента с какой-либо стороны следует использовать свойство clear.

Основная проблема со свойством float — разрушающийся контейнер в котором лежит этот элемент. Используя свойство overflow к родительскому элементу в значении hidden или auto можно добиться того, что родитель будет расширяться, вмещая всех потомков.

Наилучший метод, чтобы последующий контент был размещен вне зависимости от свойства float — использовать метод «очистки» с помощью CSS свойств (автор):

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
/* For IE 6/7 only */  
.clearfix {  
    *zoom: 1;  
}