Html 为什么我的页脚粘在页面中间？

所以我在我的第三个content div中添加了几张图片，这使得页脚要么重叠，要么粘在页面的中间，或者我想是粘在顶部。我尝试的是添加底部：0、位置：绝对和位置：相对

谢谢你的帮助D

html，
身体{
保证金：0；
填充：0；
}
@字体{
字体系列：“source_sans_prolight”；
src:url（'font1/sourcesanspro light webfont.woff2'）格式（'woff2'）、url（'font1/sourcesanspro light webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“quicksandregular”；
src:url（'font2/quicksand regular webfont.woff2'）格式（'woff2'）、url（'font2/quicksand regular webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
a{
文字装饰：无；
颜色：白色；
}
p{
字体系列：“source_sans_prolight”；
字体大小：16px；
文本对齐：对齐；
颜色：#E6；
}
h1{
字体系列：“quicksandregular”；
字号：26px；
文本对齐：居中；
颜色：白色；
}
氢{
字体系列：“source_sans_prolight”；
字体大小：16px；
颜色：白色；
填充顶部：0px；
左侧填充：15px；
高度：26px；
}
h3{
字体系列：“quicksandregular”；
字体大小：20px；
文本对齐：居中；
}
h4{
字体系列：“quicksandregular”；
字号：18px；
文本对齐：居中；
颜色：黑色；
}
h5{
字体系列：“quicksandregular”；
字号：26px；
颜色：黑色；
}
img{
最大宽度：100%；
高度：自动；
}
.标题{
背景色：白色；
宽度：100%；
高度：60px；
-webkit盒阴影：0px 2px 1px-1px rgba（0,0,0,0.75）；
-moz盒阴影：0px2px1px-1pxrgba（0,0,0,0.75）；
盒影：0px2px1px-1pxRGBA（0,0,0,0.75）；
不透明度：0.9；
位置：绝对位置；
}
menubutton先生{
字体系列：“source_sans_prolight”；
背景色：#ebebebeb；
颜色：黑色；
宽度：100px；
高度：60px；
边界：无；
字号：18px；
不透明度：0.8；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.菜单{
浮动：对；
位置：相对位置；
}
.下拉列表{
显示：无；
位置：绝对位置；
背景色：#ebebebeb；
宽度：100px；
}
.下载{
字体系列：“source_sans_prolight”；
颜色：黑色；
文字装饰：无；
文本对齐：居中；
显示：块；
最小高度：20px；
填充：10px；
}
.下拉菜单a:悬停{
背景色：#CBCB；
颜色：白色；
}
.菜单：悬停.下拉列表{
显示：块；
}
.菜单：悬停.菜单按钮{
背景色：#303030；
颜色：白色；
不透明度：1；
}
.标志{
浮动：左；
左侧填充：10px；
右边填充：10px；
垫面：4px；
}
.社交按钮1{
浮动：左；
高度：50px；
填充顶部：10px；
左侧填充：15px；
右边填充：10px；
不透明度：0.5；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.社交按钮1：悬停{
不透明度：1；
}
.社交按钮2{
浮动：左；
高度：50px；
填充顶部：10px；
左侧填充：10px；
右侧填充：15px；
不透明度：0.5；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.社交按钮2：悬停{
不透明度：1；
}
.集装箱1{
宽度：100%；
高度：400px；
}
.BK图像1{
背景图片：url（images/image1.jpg）；
背景重复：无重复；
背景尺寸：封面；
高度：800px；
}
.头衔{
宽度：510px；
填充顶部：150px；
保证金：0自动；
}
.标题p{
字体系列：“source_sans_prolight”；
字号：17px；
文本对齐：居中；
颜色：#E6；
填充顶部：10px；
}
.标题h1{
字体系列：“quicksandregular”；
字体大小：60px；
文本对齐：居中；
颜色：白色；
高度：50px；
}
.readmore{
填充顶部：10px；
宽度：100px；
保证金：0自动；
}
.Readmore 1{
边框：2倍纯白；
宽度：100px；
高度：40px；
-webkit盒阴影：0px 2px 1px-1px rgba（0,0,0,0.75）；
-moz盒阴影：0px2px1px-1pxrgba（0,0,0,0.75）；
盒影：0px2px1px-1pxRGBA（0,0,0,0.75）；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
不透明度：0.5；
字体系列：“source_sans_prolight”；
字体大小：15px；
文本对齐：居中；
}
.readmore1:悬停{
不透明度：1；
背景色：白色；
}
.内容{
保证金：0自动；
显示器：flex；
宽度：1024px；
高度：400px；
}
firsti先生{
保证金：0自动；
填充顶部：45px；
宽度：440px；
}
第一夫人{
宽度：450px；
保证金：0自动；
}
.第一{
字体系列：“source_sans_prolight”；
字体大小：16px；
颜色：黑色；
文本对齐：对齐；
}
.集装箱2{
高度：600px；
}
.BK图像2{
高度：1000px；
背景图片：url（images/image1.jpg）；
背景重复：无重复；
背景尺寸：封面；
}
.content2title{
保证金：0自动；
填充顶部：30px；
}
.内容2{
保证金：0自动；
填充顶部：30px；
高度：1000px；
宽度：1024px；
显示器：flex；
}
.footerbk{
宽度：100%；
高度：300px；
背景色：#070707；
底部：0；
位置：绝对位置；
}
.页脚{
保证金：0自动；
宽度：500px；
高度：180像素；
浮动：左；
左侧填充：10px；
填充顶部：20px；
}
.版权所有{}。联系{
垫面：5px；
}
.联系a{
颜色：#ec4e8c；
字体系列：“quicksandregular”；
字体大小：20px；
}
.footer 2{
保证金：0自动；
宽度：500px；
浮动：对；
填充顶部：20px；
}
.footerlinks{}.footerlink1{
左侧填充：15px；
显示：内联；
转换：.10s易进易出；
-moz转换：.10s易入易出；
-webkit转换：.10s易入易出；
}
.footerlink1:悬停{
不透明度：0.7；
}
.footerlink2{
显示：内联；
左侧填充：20px；
转换：.10s易进易出；
-moz转换：.10s易入易出；
-webkit转换：.10s易入易出；
}
.footerlink2：悬停{
不透明度：0.7；
}
@媒体屏幕和屏幕（最大宽度：960p）