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

Question

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

现场演示:Tinkerbin

但在左右div蓝色不显示,

如果我给overflow:hidden到wrapper那么它的做工精细.是否有必要给overflow浮动div的父母？

为什么？

Answer 1

我们在编码时遇到的一个常见问题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技巧.很久以前就有人记录过了.

Answer 2

浮动元素时,它看起来好像丢失了它的高度.所以元素是蓝色的,你只是看不到它.要么你给他高度,要么用你的包装风格overflow: hidden.如果你想要元素的背景颜色background-color: blue.color: blue是为了字母.