Html 为什么此代码可以'；t将背景颜色从主要内容设置到底部

我写了这段代码。 这段代码是html和css

...

#contents
{
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: white;
    color: black;
    border-top: 3px solid black;
    background-image: url(img/CloverImage.png);
    background-size: 300px 400px;
    background-repeat: no-repeat;
}

#content
{
    margin: auto;
    padding: 50px;
    width: 860px;
    height: auto;
    color: black;
}

...

<div id="contents">
<div id="content">
<p id="title">What are we making?</p>
<div id="mainapp">
    <h1>Pegasus</h1>
    Pegasus is very useful wordpress poster application.<br>
    This app can input html tags easily.<br>
    We're making it to open to the public.
</div>
<div id="subapp1">
    <h1>A to Z</h1>
    HAHAHAHA
</div>
<div id="subapp2">
    <h1>A to Z</h1>
    HEHEHEHE
</div>
</div>
</div>

...

。。。
#内容
{
边际：0px；
填充：0px；
宽度：100%；
背景色：白色；
颜色：黑色；
边框顶部：3件纯黑；
背景图片：url（img/CloverImage.png）；
背景尺寸：300px 400px；
背景重复：无重复；
}
#内容
{
保证金：自动；
填充：50px；
宽度：860px；
高度：自动；
颜色：黑色；
}
...
我们在做什么
飞马座
Pegasus是非常有用的wordpress海报应用程序。

此应用程序可以轻松输入html标记。

我们正在向公众开放。
从A到Z
哈哈哈
从A到Z
呵呵呵呵
...

我想设置背景颜色从主要内容到底部

但是这个代码不能做到这一点

这是网站

---

告诉我一个解决方案。

您可以使用clearfix或clear类来处理float行为

清晰类

HTML

---

或者使用clearfix类（基于html5样板）

HTML

有很多其他方法可以清除浮动，但是，我希望你能理解这个概念

您可以在以下位置找到有关浮动和清除浮动的更多信息：

Mozilla开发者网络

网络平台

Micro clearfix[html5样板文件使用它]

如果检查Chrome devtools中的

元素，您将看到它的维度没有随子元素扩展，这通常发生在它包含未被父元素清除的浮动时

因此，您可以选择使用许多ClearFixed解决方案中的一种

最简单的方法是将

溢出：隐藏的
添加到
#contents
元素的CSS中

CSS

#contents { overflow: hidden; }

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

您可以在整个模板中重复使用的更高级、更健壮的解决方案是由发明的micro clearfix，它明智地将clearfix放置在您将添加到HTML标记的类中

CSS

#contents { overflow: hidden; }

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

我没有跨浏览器测试过这些，但它们在chrome中工作，应该适合您

#contents { overflow: hidden; }

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}