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

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

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

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

Answer 2

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

header { overflow:auto; }

JSFiddle

Answer 3

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

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

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

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

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

Live example

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

向后看的方式：用非语义元素清除

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

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

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

缺陷是span元素或其他任何元素都不是语义的。

快速而肮脏的方式：溢出：隐藏

将overflow: hidden设置为父/容器，使其定义其边界。 缺点是，如果你的布局必须有与容器重叠的元素，你就无法负担得起。

现代方式：clearfix：after

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

  

Easy Clearing Method使用一个聪明的CSS伪选择器（：after）来清除浮点数。您可以应用其他类，例如＆＃34; clearfix＆＃34;而不是在父项上设置溢出。它。然后应用这个CSS：

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

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

Answer 4

因为你没有任何未开发的元素来构建＆＃34;标题内的高度，高度没有明确定义。

以下是您定义时会发生什么：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

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

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

}

Answer 6

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

另外一件事，定义标题高度也可以解决问题，但这是一个不好的做法，特别是如果你正在处理响应式布局，或者你需要在标题后面添加或删除一些内容。

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>