Html 我的CSS代码有什么问题？

我正在用html和css构建一个主题，但不起作用。为什么背景色不显示？什么是错误的CSS代码？我找不到造成问题的错误。有人能帮我修一下吗

标题{
背景颜色：蓝色；
}
#主割台{
宽度：1170px；
保证金：0自动；
}
#主割台h1{
浮动：左；
}
#主收割台导航{
浮动：对；
}

站点名称

家
关于
服务
投资组合
接触

因为您没有任何未浮动的元素来“构建”标题内的高度，并且没有专门定义高度

以下是定义它时发生的情况：

标题{
背景颜色：蓝色；
高度：150像素；
}
#主割台{
宽度：1170px；
保证金：0自动；
}
#主割台h1{
浮动：左；
}
#主收割台导航{
浮动：对；
}

站点名称

家
关于
服务
投资组合
接触

您需要清除浮动元素。这意味着您必须将带有

clear:both

CSS属性的元素放在浮动元素之后。我建议使用：

---

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

您可以使用

溢出

css属性（

自动

）来清除

浮动

高度效果：

header { overflow:auto; }

---

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

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

---

}

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

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

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

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

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

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

标题{
背景颜色：蓝色；
}
#主割台{
宽度：1170px；
保证金：0自动；
}
#主割台h1{
浮动：左；
}
#主收割台导航{
浮动：对；
}
.clearfix{
明确：两者皆有；
}

站点名称

家
关于
服务
投资组合
接触

由于容器包含浮动元素，其高度等于零，除非通过CSS设置

高度

或

最小高度

，否则这不是最佳解决方案。下面解释了清除浮动元件的所有已知解决方案：

安全和传统的方式：浮动（所有！）容器 在本例中，您将使浮动元素的所有容器自身也浮动，并将

宽度设置为如下所示：

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

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

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

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


陷阱在于它会影响布局，您必须将浮点应用于所有父级来处理它，随之而来的是层出不穷的瀑布式CSS

向后看的方式：清除非语义元素
在父元素的结束标记之前插入一个void元素，可以清除float，如下所示：

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

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

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

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

在我看来，这是清除浮动的最好、简洁、克制的方法。
清除浮动。。。由于浮动元素，标题的高度为0。是的，这就是高度问题。谢谢！请阅读以下内容以回答您的问题：“”？？为伪元素（例如
：：after
）提供“主体”时，必须提供内容，否则它们将无法呈现。