Lo explicó
Mikmoro en su guía de migración a XHTML + CSS:
Cita: E) - Otra cosa muy frecuente y que por tanto merece la pena recordar es que cuando una caja que no tiene un alto definido (que crecerá según su contenido), lo único que tiene dentro son cajas flotadas (con la propiedad "float"), esa caja no crecerá tanto como las cajas que tiene dentro. Esto es debe a que las cajas flotadas no ocupan espacio físico en el flujo del documento. Generalmente tiene fácil solución, colocando justo antes del cierre de la caja en cuestión una caja vacía como:
<div class="corte"></div>
</div> <--cierre de la caja principal-->
y en la hoja de estilo un selector como:
.corte {clear: both;}
Con esto la caja principal crecerá y las otras quedarán visualmente dentro de ella