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

【问题标题】：background color disappears when overflow is visible当溢出可见时背景颜色消失
【发布时间】：2014-01-23 20:54:18
【问题描述】：

我编写了以下CSS 代码；

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

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

google了半天也没找到解释为什么容器overflow属性可见时容器背景色会消失。 p>

谁能帮我理解为什么？

更新：

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

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

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

【问题讨论】：

也显示 html 标记...

标签： javascript html css

【解决方案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：

浮动、绝对定位元素、块容器（例如非块的内联块、表格单元和表格标题）框，并阻止具有“溢出”而不是“可见”的框（除了当该值已传播到视口时）建立新的阻止其内容的格式化上下文。

在块格式化上下文中，框一个接一个地布置，垂直，从包含块的顶部开始。垂直的两个兄弟框之间的距离由“边距”确定特性。相邻块级框之间的垂直边距块格式化上下文崩溃。

在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使有浮点数也是如此（尽管 box 的 line box 可能会因为浮动而缩小），除非 box 建立一个新的块格式化上下文（在这种情况下，盒子由于浮动，它本身可能会变窄）。

【讨论】：

谢谢 Danield... 只是为了确保我理解 .... 通过在容器元素上设置溢出：隐藏，我正在使容器“看到”浮动框作为非浮动元素？
@Joe 阅读这篇文章How does the CSS Block Formatting Context work? - 它应该可以解决问题

【解决方案2】：

这是因为你没有给#menu任何高度。

因为#container 的高度为#menu，所以背景不可见。

给它一些高度。

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

DEMO here.

【讨论】：

我试过了......我写了你的代码并从容器中删除了“溢出：隐藏”属性......但不幸的是它没有用。

【解决方案3】：

这是因为浮动子元素。如果您的容器仅包含浮动元素，则其高度将为零。

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

空 Div 方法：通过添加 <div style="clear: both;"></div> 作为最新的子元素。
溢出方法：通过在容器元素上设置overflow: hidden
轻松清除方法：通过在父元素上添加额外的 CSS 和类 (clearfix')

.clearfix:在{之后内容： ”。”; 可见性：隐藏；显示：块；高度：0；明确：两者； }

【讨论】：

【解决方案4】：

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

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

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

【讨论】：