为什么我在标题背景上添加的颜色不可见？ [复制]答案

【问题标题】：why isn't the color I added on the header background visible? [duplicate]为什么我在标题背景上添加的颜色不可见？ [复制]
【发布时间】：2018-03-21 21:29:41
【问题描述】：

尝试将背景颜色应用于我的标题，但为什么 #header 背景颜色不可见？我试过了

header { 背景：灰色；宽度：100%；边距：0 自动 }

我也尝试了不同的颜色，但它似乎不起作用。我是这个领域的新手，所以任何帮助将不胜感激。我附上了html和css代码。

* {
  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>
</body>
</html>

【问题讨论】：

标签： html css header background-color

【解决方案1】：

这是因为您的 header 中有浮动元素，所以您需要清除浮动元素。

当浮动元素位于容器框内时会出现问题，该元素不会自动强制容器的高度调整为浮动元素。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。

请参考link了解更多。

#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>

【讨论】：

我建议对您添加的代码添加更多解释；）
或更准确地说，因为all #header 中的内容是浮动的。任何非浮动内容都会增加高度。

【解决方案2】：

#header 中的所有元素都是浮动的，所以#header 超出了正常的文档流。

方法一）

#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>

方法二）

在 html 代码中插入<br style="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;

        }

    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>
  <br style="clear: both">
 </div>

【讨论】：

【解决方案3】：

这是因为标题中的子元素具有浮动属性，当元素具有浮动属性时，它们实际上并未呈现为块元素 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>

【讨论】：