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

Question

这是我的Fiddle

如果我删除下面的CSS，一切都很好。如果没有它，页脚将占据整个页面，阻止所有内容。

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

问题是没有该代码我无法在我的图像上显示我的叠加文字。我究竟做错了什么？感谢。

Answer 1

将clear:both添加到#footer;

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

Answer 2

尝试clear: both页脚。

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