我正在研究CSS布局,但我不明白为什么我的导航栏的背景颜色不会显示,除非我添加溢出：隐藏到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>
解决方法
overflow：hidden导致容器建立一个新的
formatting context,在其中包含浮动.没有它,浮动元素形成它们自己的格式化上下文并独立于容器显示,超出正常流程.
