html - 我的 CSS 代码有什么问题？

Question

我正在使用 html 和 css 构建主题但无法正常工作。为什么不显示背景颜色？什么是错误的 CSS 代码？我找不到造成问题的错误。谁能帮我解决这个问题？

header {
  background-color: blue;
}
#main-header {
  width: 1170px;
  margin: 0 auto;
}
#main-header h1 {
  float: left;
}
#main-header nav {
  float: right;
}

<header>
  <section id="main-header">
    <h1>SITE NAME</h1>
    <nav>
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>SERVICE</li>
        <li>PORTFOLIO</li>
        <li>CONTACT</li>
      </ul>
    </nav>
  </section>
  <section>
  </section>
</header>

Answer 1

您需要清除 float 元素。这意味着您必须在 float 元素之后放置一个具有 clear:both CSS 属性的元素。我建议使用 ::after pseudo selector :

#main-header::after {
    content: '';
    display: block;
    clear: both;
}

这将自动清除您的 float ，无需您创建额外的元素。