除非添加溢出:隐藏,否则CSS背景颜色不会显示。为什么?

| 我正在使用CSS布局,但是我不理解为什么除非在CSS上添加“ 0”,否则导航栏的背景颜色才会显示出来。有人可以告诉我怎么回事吗?谢谢 :) 我的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>
    
已邀请:
        “ 0”使容器建立新的格式化上下文,以在其中包含浮点数。没有它,浮动元素将形成其自己的格式设置上下文,并在正常流程之外独立于容器显示。     
        您应该使用明确的修订类(在
<ul>
之后的空白元素或在
<ul>
上使用明确的修订类,以便浏览器可以正确清除浮点数。
.clearfix {
    zoom:1;
}
.clearfix:after {
    content: \".\";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
是我大部分时间使用的一种。这是操作中的一个小提琴:http://jsfiddle.net/gpQ2f/1/     

要回复问题请先登录注册