css - 如何阻止内容与页脚重叠？

Question

所以我现在正在做一个网站，所有的内容都排列在页面周围的方框中。 CSS 看起来像这样:

section {
    position: static;
    bottom: 110px;
}

#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
    border-radius: 20px;
    border: 1px solid #00BFFF;
}

#topLeft, #topRight {
    padding-top: 10px;
}

#topLeft {
    float: left;
    margin-top: 200px;
    width: 630px;
    height: 310px;
}

#topRight {
    float: right;
    margin-top: 200px;
    width: 300px;
    height: 630px;
}

#middle {
    clear: left;
    position: absolute;
    margin-top: 530px;
    margin-left: 330px;
    width: 320px;
    height: 310px;
}

#bottomLeft {
    clear: left;
    float: left;
    margin-top: 10px;
    width: 300px;
    height: 630px;
}

#bottomRight {
    clear: right;
    float: right;
    margin-top: 10px;
    width: 630px;
    height: 310px;
}
img {
    border-radius: 20px;
}

#topRight img {
    margin-top: 25px;
}

#bottomLeft img {
    margin-top: 20px;
}

页脚在下面，它的 CSS 看起来像这样:

footer {
    clear: left;
    /*position: relative;*/
    bottom: 0px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-top: 40px;
    height: 110px;
    font: normal 12px 'Helvetica', sans-serif;
    color: white;
    text-align: center;
}

我想在其他框下方但在页脚上方添加一个新框。它的 CSS 看起来像这样:

#below {
    clear: both;
    position: absolute;
    float: left;
    margin-top: 1170px;
    width: 960px;
}

问题是这个框与页脚重叠了!我只是不知道如何解决这个问题，有什么想法吗？

Answer 1

#below { clear:both }

应该够了