如何在HTML/CSS中正确地为div包装文章和旁白添加背景色？

我只想为

文章

和

旁白

所涵盖的部分提供背景色，这样我可以给人一种印象，即

旁白

与

文章

具有相同的高度（基本上为

aside

和

div提供相同的背景色，包装
aside
和
文章
）

但是我得到的是，
div
的背景色只影响前两个
p
标记


显然，这不是我打算用
div
包装所有内容的目的

你知道为什么我的例子中的
div
背景色没有延伸到
文章和
旁白下面吗

谢谢。
因为您浮动了
可能是因为您的
clear\u fix
类没有完成它的工作

看看这个，它只是在container元素上切换
clearfix
类。如果未设置
clearfix
，它看起来很像您所经历的

将此css用于
clearfix
类：

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

有些东西没有意义，有样式表吗？我想知道浮动和绝对定位…是的。我们能看到CSS吗？当然，我会编辑页面一秒钟！谢谢你的回答。它解决了问题！但我不明白为什么它会以这种方式解决？你能解释一下吗？我认为这是理所当然的，但让我在CS中查找S规范，以便我可以发布一个体面和有用的答案。
article {
width:716px;
background-color:#87ceeb;
box-shadow: 0px 0px 4px 4px #a9a9a9;
padding-top:20px;
float:left;
margin-top: 4px;
margin-bottom: 4px;
}
aside {
width:240px;
float:left;
padding-top:20px;
background-color:#fff5dd;
margin-top:4px;
margin-left:4px;
box-shadow:0px 0px 4px 4px #a9a9a9;
}
.clear_fix {
clear:both;
}

<div style="background-color:#cccccc; overflow: auto;" class="clear_fix">

<div class="wrap">
    <p>Some text...</p>
    <div class="floated">Floated text</div>
</div>

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}