Un ejemplo:
Código HTML:
<div contenedor>
<div flotante izquierda>
<div flotante derecha>
</div contenedor> Si lo dejamos tal cual, los dos elementos flotantes se saldrán del flujo de contenido del elemento contenedor, y por lo tanto, la altura de este último no se verá afectada por la altura de los flotantes.
Una solución a eso es agregar al final un elemento con la propiedad
clear. Según el valor de esta propiedad, los elementos flotantes "empujarán" al elemento siguiente. Como este elemento sí se encuentra dentro del flujo de contenido del contenedor, obviamente al moverse hará crear al contenedor:
Código HTML:
<div contenedor>
<div flotante izquierda>
<div flotante derecha>
<div clear>
</div contenedor> El problema de esto es que te obliga a incluir un elemento innecesario (en este caso un DIV vacío). Entonces podemos lograr el mismo efecto aplicando la propiedad overflow (como hidden) al contenedor:
Código HTML:
<div contenedor con overflow>
<div flotante izquierda>
<div flotante derecha>
</div contenedor>