浮动div不显示背景颜色，当我不使用溢出？ [英] Floating div not displaying background color when i am not using overflow?

问题描述

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 精细。
是否需要给浮动父的父 $ 溢出

为什么？

当使用 float基于布局的布局编码时，我们面临的一个常见问题是： wrapper容器不会扩展到子浮动元素的高度。解决这个问题的典型解决方案是添加具有的元素清除浮动元素之后的浮动或向包装器添加清除。但是你也可以使用 overflow属性来修复这个问题。这不是一个新的CSS技巧。它早在很久以前就有记载。

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

Live demo: Tinkerbin

But in left and right div blue color is not displaying ,

If i am giving overflow:hidden to wrapper then its work fine. Is it necessary to give overflow to parent of floating div?

why?

解决方案

One of the common problems we face when coding with float based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new CSS trick either. It's been documented before long long ago.

这篇关于浮动div不显示背景颜色，当我不使用溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！