Html 文章及；边上流血过去包装和页脚

为学校项目编写代码。我有一个div包装纸、一篇文章和一个副刊。我的页面上的内容主要在它们的文章/旁白中，因此它们远远超出了包装器和页脚。有人向我建议了几种方法来解决这个问题（clearfix:：after，.group），但我似乎无法得到它。有没有办法解决这个问题，这样包装器就可以扩展到适合放在一边和文章

*{
边距，填充：0；
}
@字体{
/*字体系列：机器人黑；
src:url（字体/RobotoBlack.ttf）*/
}
@字体{
/*字体系列：Roboto；
src:url（字体/RobotoReg.ttf）*/
}
@字体{
字体系列：RubikBold；
src:url（字体/RubikBold.ttf）
}
@字体{
字体系列：Rubik；
src:url（字体/RubikReg.ttf）
}
@字体{
字体家族：联盟；
src:url（字体/League.otf）
}
标题{
背景图片：url（images/header2.jpg）；
宽度：1200px；
高度：150像素；
保证金：0；
填充：0；
边界半径：50px 50px 0；
}
身体{
背景色：#EAFAF1；
}
div#wrapper{
宽度：1200px；
保证金：0自动；
背景色：#BDFEC2；
边界半径：50px 50px 50px 50px；
}
导航{
保证金：0；
填充0；
}
导航ul{
列表样式：无；
}
李海军{
显示：内联块；
填充：10px；
背景色：#AED6F1；
}
导航a{
文字装饰：无；
字体系列：Roboto Black、Helvetica、sans serif；
颜色：黑色；
字号：1em；
}
导航a：悬停{
颜色：#F4D03F；
}
导航a：激活{
颜色：#3498DB；
}
h1{
左侧填充：50px；
字体系列：League、Helvetica、sans serif；
}
h1：：第一个字母{
字体大小：110%；
颜色：#145A32；
}
氢{
左侧填充：50px；
字体系列：RubikBold、Helvetica、无衬线；
}
p、 h3{
左侧填充：30px；
字体系列：Roboto，Helvetica，无衬线；
}
h4{
左侧填充：20px；
字体系列：Roboto，Helvetica，无衬线；
颜色：154360；
字体大小：110%；
}
h5{
左侧填充：20px；
字体系列：Roboto，Helvetica，无衬线；
颜色：#000000；
字体大小：130%；
}
img{
利润率：30像素；
边框：3px实心#A569BD；
最大宽度：25%；
高度：自动；
边界半径：10%；
}
文章{
浮动：左；
宽度：60%；
背景色：82E0AA；
利润率：1%；
填充：1%；
}
第李条{
字体系列：Roboto，Helvetica，无衬线；
}
旁白{
浮动：对；
宽度：30%；
背景色：#D7BDE2；
利润率：.7%；
填充：10px；
颜色：#145A32；
}
旁白ul{
字体系列：机器人黑，黑，无衬线；
内容：“\266C”；
}
大宗报价{
浮动：对；
宽度：22%；
背景色：#F1C40F；
利润率：.7%；
填充：1%；
颜色：#FFFFFF；
字体系列：League，Arial无衬线字体；
字体大小：20px；
背景图片：url（images/bby.jpg）；
}
菲卡普顿{
字体系列：League，Arial无衬线字体；
字体大小：15px；
}
页脚{
背景图片：url（images/footer2.jpg）；
宽度：1200px；
高度：100px；
边界半径：0 0 50px 50px；
}
梅因，在旁边{
填充：20px；
}
主要{
背景色：#87FE91；
}
.第一个字母{
浮动：左；
字体大小：25px；
线高：1；
字体大小：粗体；
}
.引起注意{
字体系列：机器人黑，黑，无衬线；
}
.集装箱{
边框：2件纯黑；
宽度：500px；
保证金：0自动；
/*溢出：隐藏*/
/*显示：流根*/
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.小组：之后{
内容：“；
显示：表格；
明确：两者皆有；
}

检疫：音乐
检疫地点






检疫：音乐♫；

只需添加clearfix div和类

*{
边距，填充：0；
}
@字体{
/*字体系列：机器人黑；
src:url（字体/RobotoBlack.ttf）*/
}
@字体{
/*字体系列：Roboto；
src:url（字体/RobotoReg.ttf）*/
}
@字体{
字体系列：RubikBold；
src:url（字体/RubikBold.ttf）
}
@字体{
字体系列：Rubik；
src:url（字体/RubikReg.ttf）
}
@字体{
字体家族：联盟；
src:url（字体/League.otf）
}
标题{
背景图片：url（images/header2.jpg）；
宽度：1200px；
高度：150像素；
保证金：0；
填充：0；
边界半径：50px 50px 0；
}
身体{
背景色：#EAFAF1；
}
div#wrapper{
宽度：1200px；
保证金：0自动；
背景色：#BDFEC2；
边界半径：50px 50px 50px 50px；
}
导航{
保证金：0；
填充0；
}
导航ul{
列表样式：无；
}
李海军{
显示：内联块；
填充：10px；
背景色：#AED6F1；
}
导航a{
文字装饰：无；
字体系列：Roboto Black、Helvetica、sans serif；
颜色：黑色；
字号：1em；
}
导航a：悬停{
颜色：#F4D03F；
}
导航a：激活{
颜色：#3498DB；
}
h1{
左侧填充：50px；
字体系列：League、Helvetica、sans serif；
}
h1：：第一个字母{
字体大小：110%；
颜色：#145A32；
}
氢{
左侧填充：50px；
字体系列：RubikBold、Helvetica、无衬线；
}
p、 h3{
左侧填充：30px；
字体系列：Roboto，Helvetica，无衬线；
}
h4{
左侧填充：20px；
字体系列：Roboto，Helvetica，无衬线；
颜色：154360；
字体大小：110%；
}
h5{
左侧填充：20px；
字体系列：Roboto，Helvetica，无衬线；
颜色：#000000；
字体大小：130%；
}
img{
利润率：30像素；
边框：3px实心#A569BD；
最大宽度：25%；
高度：自动；
边界半径：10%；
}
文章{
浮动：左；
宽度：60%；
背格
main:before, main:after {
    display: table;
    content: "";
    clear: both;
}