Esta es una técnica a veces poco conocida por los iniciados en el mundo del diseño web, es algo muy sencillo de hacer, a continuación te muestro como hacerlo.

La idea es solucionar el problema que sucede con un div cuando se le asigna la propiedad float a uno de elementos dentro de ese div, el problema es que cuando se le asigna dicha propiedad, el div contenedor se encoje, esto es debido a que al momento de asignarle un valor a la propiedad float a un elemento, este se “sale” del fluido normal del lenguaje HTML haciendo que el div contenedor parezca no tener contenido.

Para solucionar esto se le agrega un div al final del div contenedor, así:

<div>
<p>Contenido del div</p>
<div></div>
</div>

Suponiendo que el contenido está flotado a la izquierda así:

div p {
width: 100px;
float: left;
}

El CSS para el div de ayuda:

.float {
height: 0;
clear: both;
}

Tambien hay otra forma de hacerlo y tiene una ventaja, pero tambien desventaja, ya que no es mostrado debidamente por Internet Explorer, pero es solucionable agregando una propiedad mas al div contenedor en el archivo css , se trata de la propiedad overflow, que hace que el div contenedor se extienda hasta abarcar todo el contenido. La ventaja es que no ensucia el código HTML así que es la solución más practica. Así va el CSS:

div {
width: 100%;
overflow: hidden;
}

Una vez realizado esto, este es el resultado, tambien pueden ver a la izquierda como se comporta el div contenedor sin el div de ayuda: Para mí es mejor la pimera opción ya que nos garantiza la segura presentación de lo que queremos, aunque nos ensucie un poco el código HTML.