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.解决此问题的典型解决方案是添加一个带{的元素{1}}。但您也可以使用clear float after the floating elements or adding a clearfix to the wrapper。这也不是一个新的CSS技巧。很久以前就已经有人记录过了。

Answer 2

当你浮动元素时，它看起来好像丢失了它的高度。所以元素是蓝色的，你只是看不到它。要么给他高度，要么使用overflow: hidden给你的包装打造样式。如果你想要元素的背景色，那就是background-color: blue。 color: blue用于写信。

Answer 3

如果您在<div>中有浮动元素，则必须使用clearfix。

当浮动元素位于容器框内时，问题就会发生，该元素不会自动强制容器的高度调整到浮动元素。当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除了。

<div id="wrapper">
  <div id="content">
    <div id="slider">slider</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div class="clear"></div> <!-- THIS -->
  </div>
</div>

.clear { clear: both }

现场演示：Tinkerbin

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

3 个答案: