除非我添加溢出，否则 CSS 背景颜色不会显示：隐藏？为啥？
Posted
技术标签:
【中文标题】除非我添加溢出，否则 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 条评论，但我编辑得不够快）
【参考方案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 想要使用溢出的特性，否则真的没关系。对不起，我的措辞有错误的精确螺栓。以上是关于除非我添加溢出，否则 CSS 背景颜色不会显示：隐藏？为啥？的主要内容，如果未能解决你的问题，请参考以下文章
除非我更改列名，否则不会应用 DataFrame 用户定义的函数