除非添加溢出:隐藏，否则CSS背景颜色不会显示.为什么? [英] CSS background color not showing up unless I add overflow:hidden? Why?
本文介绍了除非添加溢出:隐藏，否则CSS背景颜色不会显示.为什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用CSS布局，但是我不理解为什么除非将overflow: hidden添加到CSS中，否则导航栏的背景颜色才会显示出来.有人可以向我解释发生了什么吗?谢谢:)
I'm working on a CSS layout, but I don't understand why the background color of my navigation bar doesn't show up unless I add overflow: hidden to the CSS. Can someone explain to me what's going on? Thanks :)
我的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使容器建立新的格式化上下文.如果没有它，则浮动元素会形成自己的格式设置上下文，并且会在正常流程之外独立于容器显示.
overflow: hidden causes the container to establish a new formatting context within which to contain the floats. Without it, the floated elements form their own formatting contexts and display independently of the container, out of normal flow.
这篇关于除非添加溢出:隐藏，否则CSS背景颜色不会显示.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
