Question

我正在研究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>

Answer 1

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

Answer 2

您应该使用明确的修复类（<ul>后面的空元素或<ul>上的明确修复类，以便浏览器正确清除浮动。

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

我大部分时间都在使用。以下是它的一个小提琴：http://jsfiddle.net/gpQ2f/1/

CSS背景颜色不显示，除非我添加overflow：hidden？为什么？

2 个答案: