4

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的父母？

为什么？

4

3 回答 3

16

我们在编码时面临的一个常见问题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 技巧。它在很久以前就被记录在案了。

于 2012-07-29T13:21:55.783 回答
7

当你浮动一个元素时，它看起来好像失去了它的高度。所以元素是蓝色的，你只是看不到它。要么给他高度，要么用overflow: hidden. 如果你想要元素的背景颜色，它是background-color: blue. color: blue用于字母。

于 2012-07-29T13:02:48.963 回答
3

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

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

<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

于 2012-07-29T13:31:23.593 回答