Question

我写了以下CSS代码;

#container {
    width: 1300px;
    background-color:green;
    margin:0 auto;
    overflow:hidden;
}

#menu {
    float:left;
    width:20%;
    background-color: yellow;
}

搜索谷歌很长一段时间后，当容器overflow属性可见时，我无法找到解释为什么容器背景颜色正在消失的原因。

有人可以帮助我理解为什么吗？

更新

非常感谢您的回答.... :)

我不介意使用overflow：hidden，我只想了解它的目的以及如何使用它。

当我unserstand时，overflow属性指定如果内容溢出元素的框会发生什么，所以我不明白为什么它的可见性会使容器背景颜色消失或者为什么它会改变容器的高度。

Answer 1

由于容器中的元素具有float:left - 容器的高度为0 - 这也是导致您看不到任何背景的原因。

为了解决这个问题，有一些解决方案：

其中一个名为clearfix

<div id="container" class="clearfix">
  <!-- floated elements here -->
</div>

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

另一种方法是在容器元素上设置overflow:hidden - 这会建立一个新的块格式化上下文 - 这实际上会清除浮点数。（见this post）

来自the spec：

浮动，绝对定位的元素，阻挡容器（例如   不阻塞的内联块，表格单元格和表格字幕   盒子，以及“溢出”除“可见”以外的块盒（除了   当该值已传播到视口时）建立新的   阻止格式化其内容的上下文。


在块格式化上下文中，框一个接一个地布局，     垂直，从包含块的顶部开始。垂直的     两个兄弟框之间的距离由'边距'决定     属性。 a中相邻块级框之间的垂直边距     阻止格式化上下文崩溃。

在块格式化上下文中，每个框的左外边缘都接触到     包含块的左边缘（从右到左格式化，右边     边缘触摸）。即使在浮子的存在下也是如此（尽管如此）     除非盒子，否则盒子的线盒可能会因浮子而收缩     建立一个新的块格式化上下文（在这种情况下，框     由于漂浮物本身可能会变窄。

Answer 2

这是因为浮子元素。如果容器只包含浮动元素，则其高度将等于零。

您需要包含一个明确的元素，存在不同的可能性：

空Div方法：添加<div style="clear: both;"></div>作为最新子元素。
溢出方法：在容器元素上设置overflow: hidden
简易清算方法：在父元素（clearfix'）上添加额外的CSS和类

.clearfix：after { 内容：“。”; 能见度：隐藏; 显示：块; 身高：0; 明确：两者; }

Answer 3

这种情况正在发生，因为你没有给#menu任何高度。

正如#container的高度为#menu，背景不可见。

给它一些高度。

#menu {
    float:left;
    width:20%;
    background-color: yellow;
    height:50px;
}

DEMO here.

Answer 4

您可以将容器div的高度设置为与菜单的高度相等。这样您就不需要溢出：隐藏设置。

$("#container").height($("#menu").height());

在这里演示：http://jsfiddle.net/er144/ZV6pb/

当溢出可见时，背景颜色消失

更新

4 个答案: