Контент, помеченный свойством 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; }