如何阻止內容重疊頁腳？

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 } 

應該足夠