为什么我在标题背景上添加的颜色不可见？
这个问题在这里已经有了答案：
这是因为您的header有浮动元素，所以您需要清除浮动元素。
当一个浮动元素位于容器框内时，该问题发生，该元素不会自动强制容器的高度调整为浮动元素。 当一个元素被浮动时，它的父元素不再包含它，因为浮动元素被从流中移除。
请参阅此链接以获得更多理解。
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
*{
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto
}
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
</div>
</body>
</html> #header内部的所有元素都是浮动的，所以#header离开正常的文档流。
方法1）
#header:after {
content: '';
display: block;
clear: both;
}
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
#header:after {
content: '';
display: block;
clear: both;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
</div>发生这种情况是因为标题中的子项具有浮动属性，当元素具有浮动属性时，它们实际上不会呈现为块元素https://stackoverflow.com/a/16568504/2894798这就是为什么默认情况下，标题具有高度0，所以要解决它，我会添加一个明确的修复属性，
* {
margin: 0 auto;
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
<div style="clear:both;">
</div>
</body>
</html>上一篇: why isn't the color I added on the header background visible?