Дело именно во
float. После блоков с
float'ами должен идти блок со
style="clear: both;" - именно это заставит родительский блок учесть высоты дочерних
float-блоков. В качестве такого блока может выступать и псевдоэлемент
:after (чтобы html не засорять заглушками).
Подробности можешь прочитать, например, на
htmlbook.ru
Это без
float элемент будет блочным и шириной 100%. А когда ты ставишь
float, то ширина блока - если не указано значение ширины в абсолютных величинах (px, em и т.д.) - уменьшается до ширины контента.
Старайся верстать без
float. В большинстве случаев можно обойтись вариантами
display: inline-block, или
display: table-cell. А недавно появился великолепный вариант
display: flex.