¿División flotante que no muestra el color de fondo cuando no estoy usando desbordamiento?

HTML :

CSS :

 #wrapper { background:blue; width:990px; margin:0 auto; } #content { width:990px; height:auto; } #slider { width:990px; /* slider jquery */ height:auto; } #left { float:left; width:490px; } #right { float:right; width:490px; } 

Demostración en vivo: Tinkerbin

Pero en div izquierdo y derecho, el color azul no se muestra,

Si estoy dando overflow:hidden to wrapper entonces funciona bien. ¿Es necesario overflow al padre de div flotante?

¿por qué?

Uno de los problemas comunes que enfrentamos al codificar con float based layouts es que el wrapper container no se expande a la height of the child floating elements. La solución típica para solucionar esto es agregar un elemento con clear float after the floating elements or adding a clearfix to the wrapper . Pero también puede usar la overflow property to fix this problem . Tampoco es un nuevo truco de CSS. Ha sido documentado hace mucho tiempo.

Cuando flotas un elemento, parece como si se hubiera perdido su altura. Entonces el elemento está en color azul, simplemente no lo ves. O le das altura, o dale estilo a tu envoltorio con overflow: hidden . Y si quieres color de fondo para los elementos, es background-color: blue de background-color: blue . color: blue es para letras.

Tienes que usar el clearfix si tienes elementos flotantes dentro de un

.

El problema ocurre cuando un elemento flotante está dentro de una caja contenedora, ese elemento no fuerza automáticamente el ajuste de altura del contenedor al elemento flotante. Cuando un elemento se flota, su elemento primario ya no lo contiene porque el flotante se elimina del flujo.

 
slider
left
 .clear { clear: both } 

Demostración en vivo: Tinkerbin