html - 无法更改页脚背景颜色

Question

我正在 Github 页面上建立一个网站，我正在尝试更改页脚的颜色。如您所见，我使用类“页脚”制作。在 CSS 上，我将背景色属性设置为#000000。但是，我在桌面上仍然看不到黑色背景颜色。(我可以在移动页面上看到，因为我设置了媒体查询)代码如下。

@media screen and (min-width: 1000px) {

html, body{
  font-family: "Comfortaa";
}

.header-logo{
  float: left;
  padding: 10px 30px;
}

.header li:hover{
  border-bottom: 2px solid #24ABE2;
}

.header a{
  float:left;
  display:block;
  color:black;
}


.header-link li{
  float: left;
  padding: 5px 60px;
  font-size: 20px;
  color:#24ABE2;
}

/* Dropdown Button */
.droplist{
  border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
  margin-top: 29px;
  height: 210px;
  color:#24ABE2;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: #24ABE2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 20;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  border-bottom: 2px solid #24ABE2;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: white;
}


.footer-logo{
  float: left;
  padding: 15px 20px;
  width: 300px;
  height: auto;
  margin-left: 30px;
  margin-top: 20px;
}

.footer-list{
  margin-top:10px;
  font-size: 20px;
  color: #ccfbff;
  float: right;
  padding: 2px 8px;
  margin-right: 40px;
}

.footer-list li{
  padding: 10px;
}
 
}


@media screen and (max-width: 1000px) {
html, body{
  font-family: Nunito;
}


.header-logo{
  text-align:center;
  margin-left:20px;
  padding: 10px 30px;
}

.header li{
  display:none;
}
  
.header-link{
 display:none;
}

.footer-logo{
  padding: 15px 10px;
  width: 300px;
  height: 90px;
  margin:auto;
  text-align:center;
}

.footer-logo img{
  width: 300px;
  height: auto;
  margin:auto;
  text-align:center;
}

.footer-list{
  display:block;
  margin:auto;
  font-size: 20px;
  color: #ccfbff;
  padding: 2px 8px;
  text-align:center;
}

.footer-list li{
  margin:auto;
  padding: 5px;
  font-size:20px;
  text-align:center;
}

}



/* CSS for default design */
html { scroll-behavior: smooth; } 

html, body{
  height: 100%;
  width: 100%;
  margin: 0px 0px 0px 0px;
  z-index:-10;
}

/* Settings of a tag for whole page*/
a:link {
  text-decoration: none;
  cursor: pointer;
}

a:visited {

  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  cursor: pointer;
}
a:active {
  text-decoration: none;
  cursor: pointer;
}

.header {
  border-bottom:2px solid #0E76BC;
  background-color: white;
  height: 60px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  opacity: 90%;
  margin: 0px 0px 0px 0px;
  z-index:10;
}

.header-logo{
  width: 300px;
  height: auto;
}
  
li{
  list-style: none;
}

.footer{
  height: auto;
  background-color: #000000 !important;
  width: 100%;
  margin: 0px 0px 0px 0px;
}

.footer a:link {
  color: #ccfbff;
}

.footer a:visited {
  color: #ccfbff;
}

.footer a:hover {
  color: #ccfbff;
}

.footer a:active {
  color: #ccfbff;
}

<div class="footer">
      <img src="https://i.ibb.co/p4LvvdH/Copy-of-LOGO-White.png" alt="SLED Logo" class="footer-logo" />
      <div class="footer-list">
       <ul>
        <a href="#top"><li>Back to Top</li></a>
        <a href="https://instagram.com/jcbmssledteam/"><li>Instagram</li></a>
        <a href="https://www.facebook.com/jcbooth.sled"><li>Facebook</li></a>
        <a href="mailto: jcbms-sled-team@mail.fcboe.org"><li>Jcbms-sled-team@mail.fcboe.org</li></a>
        <a href="https://www.fcboe.org/jcbms"><li>J.C. Booth Middle School</li></a>
        <a href="https://www.fcboe.org"><li>Fayette County Public Schools</li></a>
       </ul>
      </div>
</div>

Answer 1

每当我们给子项赋予 float 属性时，父项就会自动将自己的高度设为 0，所以请这样写:

    .footer:before,
    .footer:after
    {
        clear: both;
        display: block;
        content: '';
    }