Html 页脚未显示，因为图像位置设置为相对

这是我的

如果我删除下面的css，一切都会很好。如果没有它，页脚会占据整个页面，将所有内容都屏蔽掉

.image {
    position:relative;
    float: left;
}
.image .text {
    position:absolute;
    top:110px;
    left:55px;
    width: 200px;
    color: white;
    font-size: 14px;
}

---

问题是没有这些代码，我就无法在图像上显示覆盖文本。我做错了什么？谢谢。

添加

清除：两个
到
#footer

#footer {
    margin: 0px auto;
    padding-bottom: 60px;
    width: 850px;
    background: #444;
    position: relative;
    text-align: center;
    clear:both;
}

尝试
清除：将两个
都清除到页脚

#footer {
    margin: 0px auto;
    padding-bottom: 60px;
    width: 850px;
    background: #444;
    position: relative;
    text-align: center;
    clear: both;
}

试着这样做：在css中始终有一个类
.clearfix{clear:both}
，并在需要时调用它，而不是每次都添加
clear:both
。