El borde del bloque contenedor no aparece

Un problema común con los diseños css es cuando hacemos flotar elementos y el contenedor no se estira para albergar a las bloques internos. El problema es más explicito y lo podemos notar cuando deseamos agregar un borde alrededor del contenedor y este no encierra los bloques internos.

Queremos que el borde solido negro encierre a los dos bloque internos, pero eso no ocurre, porque el div contenedor en sí no tiene una altura definida, Por lo tanto, el bloque contenedor se mantiene en la parte superior de los bloques flotantes. Estos son los códigos que estamos usando:

.contenedor {border: 1px solid #000000;}
.izq {width: 400px;height:250px; float: left;}
.der{width: 400px;height:250px; float: right;}

<div class="contenedor">
<div id="izq">Bloque flotante izquierdo</div>
<div id="der">Bloque flotante derecho</div>
</div>

Alternativa de Solución agregando un elemento no flotante

La antigua solución a este problema consistia en agregaba un elemento no flotante, lo que extendia el contenedor

.contenedor {border: 1px solid #000000;}
.izq {width: 400px;height:250px; float: left;}
.der{width: 400px;height:250px; float: right;}
.corrige{clear:both;}

<div class="contenedor">
<div id="izq">Bloque flotante izquierdo</div>
<div id="der">Bloque flotante derecho</div>
<div class="corrige"></div>
</div>

El inconveniente es la innecesaria adición de un elemento HTML solo para la presentación eso es algo que debemos evitar.

Alternativa de Solución solo con CSS

Es una alternativa más limpia y sencilla, que consiste en agregar unas propiedades CSS, y sin agregar ningún elemento div extra al HTML. Veamos se añade lo siguiente en el CSS.

.contenedor {border: 1px solid #000000;
            overflow: hidden;width: 100%}
.izq {width: 400px;height:250px; float: left;}
.der{width: 400px;height:250px; float: right;}

El ancho es necesario para que surga efecto en en el IE6