<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
¿Por qué no aparece el color de fondo entre esos 2 divs? 
Color de fondo para div con divisiones secundarias
Cuando flote elementos, debe proporcionar el ancho de los elementos flotados. De lo contrario, puede encontrar comportamientos inesperados en diferentes navegadores.
Check this tutorial, hay buena información sobre flotación en css. [link was dead]
Básicamente, si proporciona un overflow:hidden; al contenedor div y proporciona ancho a los elementos flotados, su problema será resuelto.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Del mismo modo, se puede añadir otro div donde quiera que desea normalizar el flujo ike esto:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Tanto funcionará :)
EDITAR
Otro método que Uso con frecuencia en estos días es para flotar el primer elemento y establecer un margin-left en el siguiente elemento. Por ejemplo:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
La ventaja de este método es que el elemento siguiente (el segundo div en este caso) no necesita un ancho fijo. Además, puede omitir el tercer div (clear: both;). Es opcional Solo lo agrego en caso de que el div flotante sea más largo en altura que el segundo div, ya que si no lo agregas, el div principal siempre obtendrá la altura del segundo div.
Simplemente configure el contenedor div en overflow: hidden;.
Si configura elementos para flotar, ya no estarán en el 'flujo' normal del documento.
div { background: #ccc; overflow: hidden; }
Y que ni siquiera hizo un círculo a mano alzada;)
Es porque tanto los div s están flotando por lo que el div que contiene no tiene altura. Si tuviera que agregar un tercer hijo div que no era un flotador, dele una altura de 0 y clear:both, debería ver aparecer el color de fondo.
Un elemento flotante no afecta el tamaño del elemento primario, a menos que el elemento primario contenga específicamente los elementos secundarios que utilizan el estilo overflow.
Su div externo tiene los mismos colores de fondo que los divs secundarios, pero la altura del elemento primario es cero, por lo que no puede ver su fondo.
El espacio en blanco que muestra es una parte del cuerpo y establece el color de fondo en el elemento div pero no en el cuerpo. Esa es la razón por la cual la parte del cuerpo está vacía.
para colorear la parte vacía se debe añadir siguiente código:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Usted puede cambiar el color de fondo del cuerpo cambiando el color de fondo en el estilo de la carrocería.
¡Yuck! Intenta no usar el truco 'clear: both' cuando puedas. Casi siempre (¿siempre?) Hay una mejor solución. – PeeHaa
No estaba al tanto del truco 'overflow: hidden'. – Gareth
Parece que aprendió algo hoy :) Para completar mi comentario y educarlo aún más;) tenga cuidado al usar el desbordamiento 'overflow: hidden;' cuando quiera usar CSS3 (por ejemplo, sombras paralelas). Afortunadamente, también tenemos una solución para eso: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/ – PeeHaa