Javascript 溢出可见时背景色消失

我编写了以下

CSS

代码

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

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

在谷歌搜索了很长一段时间后，我找不到一个解释，为什么容器

overflow

属性可见时，容器背景色消失了

有人能帮我理解为什么吗

---

更新：

---

非常感谢您的回答……：）

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

---

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

因为容器中的元素是have

float:left

-容器的高度为0-这也是导致你看不到任何背景的原因

为了解决这个问题，有几种解决方案：

其中一个叫做clearfix

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

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

.clearfix:之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
}

另一种方法是在container元素上设置

overflow:hidden

，这将建立一个新的块格式上下文，这实际上会清除浮动。（见附件）

发件人：

浮动、绝对定位元素、块容器（例如 内联块、表格单元格和表格标题）不属于块的 “溢出”而非“可见”的框和块框（除 将该值传播到视口后）建立新的 阻止其内容的格式化上下文

在块格式上下文中，框会一个接一个地排列， 垂直，从包含块的顶部开始。垂直的 两个同级框之间的距离由“边距”确定 财产。图形中相邻块级别框之间的垂直边距 块格式上下文折叠

在块格式上下文中，每个框的左外边缘都与 包含块的左边缘（对于从右到左的格式，右 边缘接触）。即使在存在浮点数的情况下也是如此（尽管 长方体的线盒可能会因浮动而收缩），除非长方体 建立新的块格式上下文（在这种情况下，框 由于浮动，其本身可能变得更窄）

---

这是因为您没有为

#菜单

指定任何高度

由于，

#容器

的高度为

#菜单

，因此背景不可见

给它一些高度

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

---

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

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

• 空Div方法：通过添加一个
  作为最新的子元素
• 溢出方法：通过在容器元素上设置

  溢出：隐藏

• 轻松清除方法：在父元素上添加额外的CSS和类（

  clearfix'

  ）
  .clearfix:在{ 内容：“.”； 可见性：隐藏； 显示：块； 身高：0； 明确：两者皆有； }

---

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

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

---

这里演示：

也显示html标记…我试过了。。。我编写了您的代码并从容器中删除了“overflow:hidden”属性。。。但不幸的是，它没有起作用。谢谢Danield。。。只是为了让我明白。。。。通过设置overflow:hidden在container元素上，我使容器“看到”了作为非浮动元素的flotted盒子？@Joe阅读了这篇文章-它应该会把事情弄清楚