除非我添加溢出，否则 CSS 背景颜色不会显示：隐藏？为什么？答案

【问题标题】：CSS background color not showing up unless I add overflow:hidden? Why?除非我添加溢出，否则 CSS 背景颜色不会显示：隐藏？为什么？
【发布时间】：2011-09-22 16:03:20
【问题描述】：

我正在处理 CSS 布局，但我不明白为什么我的导航栏的背景颜色不显示，除非我将 overflow: hidden 添加到 CSS。有人可以向我解释发生了什么吗？谢谢:)

我的 CSS 文件：

@import "reset.css"; /* Meyer's CSS reset */

body { background-color: #f3f3f3;   font: 15px sans-serif; }

#wrapper { 
  width: 1000px;
  margin: 0 auto;
}

#navigation {
  width: inherit;
  margin-top: 20px;
  background-color: #ccc;
  overflow: hidden;
}

#navigation li {
  float: left;
}

#navigation li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  color: #000;
}

#navigation li a:hover {
  background-color: #aaa;
}

我的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Layout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="">Nav0</a></li>
        <li><a href="">Nav1</a></li>
        <li><a href="">Nav2</a></li>
        <li><a href="">Nav3</a></li>
        <li><a href="">Nav4</a></li>
        <li><a href="">Nav5</a></li>
      </ul>
    </div>
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>
</html>

【问题讨论】：

为我工作，jsfiddle.net/HmteM
@Ash - 那是因为他在上面的代码中有overflow: hidden。见jsfiddle.net/tFQyT
与overflow: hidden: jsfiddle.net/tFQyT/1
我强烈建议在reset.css 和@import 语句中使用完整的<link...> 标签。
不使用@import stevesouders.com/blog/2009/04/09/dont-use-import 的原因（应该是 1 条评论，但我编辑得不够快）

标签： css background-color

【解决方案1】：

overflow: hidden 导致容器建立一个新的formatting context 来包含浮动。没有它，浮动元素会形成自己的格式化上下文并独立于容器显示，超出正常流程。

【讨论】：

@casey;正如bolt所说的溢出：隐藏有助于容器清除其内部浮动，因为浮动迫使一个元素离开它是正常的流动，必须通过它的父元素清除它。 检查一下 LINK 了解更多

【解决方案2】：

您应该使用 clear fix 类（<ul> 之后的空元素或在 <ul> 上使用 clear fix 类，以便浏览器正确清除浮动。

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

是我最常使用的一种。下面是它的实际操作：http://jsfiddle.net/gpQ2f/1/

【讨论】：

他为什么应该使用 clearfix 类而不是overflow: hidden/auto？
除非 OP 想要使用溢出的特性，否则真的没关系。对不起，我的措辞有错误的精确螺栓。