当我不使用溢出时，浮动 div 不显示背景颜色？

HTML:

<div id="wrapper">
    <div id="content">
      <div id="slider"></div>

      <div id="left"></div>

      <div id="right"></div>
    </div>
  </div>

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;
}

现场演示：廷克宾

但在左右div中蓝色不显示，

如果我给予overflow:hidden to wrapper那么它的工作正常。 是否有必要给予overflow到浮动div的父级？

why?

我们在编码时遇到的常见问题之一float based layouts那是wrapper container不扩展到height of the child floating elements.解决此问题的典型解决方案是添加一个元素clear float after the floating elements or adding a clearfix to the wrapper。但您也可以使用overflow property to fix this problem。这也不是一个新的 CSS 技巧。很久以前就已经有记录了。