我的 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

由于您的容器包含浮动元素，它的高度等于零，除非您通过 CSS 设置 height 或 min-height，否则 不是最佳解决方案。下面解释了所有已知的清除浮动元素的解决方案：

安全和传统的方式：浮动（全部！）容器

在这种情况下，您使浮动元素的所有容器同样浮动，并像这样设置width,：

header {
 background-color: blue;
 float:left;
}

#main-header nav {
  float: right;
  background:red;
  width:50%
}

Live example

陷阱在于它会影响布局，你必须处理它，将浮动应用到所有父级，随之而来的是无尽的瀑布式 CSS...

回溯方式：用非语义元素清除

您可以在父项的结束标记之前插入一个 void 元素来清除浮动，如下所示：

  [CSS]
   .clear-all {clear:both;}

  [HTML]
  <header>
   .....
   <span class="clear-all"></span>
  </header>

陷阱是span 元素或其他元素不是语义的。

又快又脏的方式：溢出：隐藏

将overflow: hidden 设置为父/容器，它可以定义其边界。 陷阱是，如果你的layed必须有元素重叠容器，你买不起。

现代方式：clearfix:after

通过阅读这篇Css-tricks 文章，您可以了解到：

Easy Clearing Method 使用巧妙的 CSS 伪选择器 (:after) 来清除浮动。与其在父级上设置溢出，不如向其应用一个附加类，如“clearfix”。然后应用这个 CSS：

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
 }

在我看来，这是清除浮动的最佳、简洁、克制的方式。

Answer 2

您正在使用浮动元素，因此父元素（在本例中为标题）将具有零高度值，您需要做的是添加另一个元素以清除浮动，例如：

还有一件事，定义标题高度也可以解决问题，但这是一种不好的做法，尤其是在您处理响应式布局时，或者如果您需要在标题中添加或删除一些内容。

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

<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>
  <div class="clearfix"></div>
</header>

Answer 3

您可以执行以下两个选项：

header { 
 ...
 overflow:auto; 
 min-height:10px; /*or what vere you thing would be ideal for default*/

}

Answer 4

您可以使用overflow css 属性（例如auto）来清除float 的高度效果：

header { overflow:auto; }

JSFiddle

Answer 5

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

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

这将自动清除您的浮动，而无需您创建其他元素。

Answer 6

因为您没有任何非浮动元素来“构建”标题内的高度，并且没有具体定义高度。

定义它时会发生以下情况：

header {
  background-color: blue;
  height: 150px;
}
#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>