不能讓我的頁腳去頁面的底部

Question

我在頁面上有一個頁腳，然後我想在它上面放置幾個div，但由於某種原因頁腳似乎出現在這個div旁邊而不是下面它

我想主要的頁腳是頁腳

這裏上面是我的代碼

<div id ="mainfooter"> 
 

 
<div id = "links"> 
 

 
<h2>Quick Links</h2> 
 

 
</div> 
 

 
<div id ="sunday"> 
 

 
<h2>Join us this Sunday</h2> 
 

 
<p>11am &amp; 6:30pm</p> 
 

 
</div> 
 

 
<div id="findus"> 
 

 
\t <h2>Find Us</h2> 
 

 
\t 
 

 
</div> 
 
</div> 
 

 

 
<div id="footer"> 
 

 
<p id="copyright"> &copy; <span id="copyright_span"></span> Elim Church</p> 
 

 

 
</div>

這裏是我的CSS

#links 
 
{ 
 
    padding-left: 20px; 
 
    color: #000; 
 
    width: 150px; 
 
    float: left; 
 
} 
 

 
#sunday{ 
 
    padding-left: 100px; 
 
    width: 200px; 
 
    color: #000; 
 
    float: left; 
 
} 
 

 

 
#findus{ 
 
    padding-left: 100px; 
 
    color: #000; 
 
    width: 200px; 
 
    float: left; 
 
} 
 

 
#mainfooter 
 
{ 
 
    padding-top: 50px; 
 
} 
 

 

 
#footer { 
 
    
 
    padding-top: 50px; 
 
    padding-left:100px; 
 
    background:#F3EFE0;  
 
    
 
    padding-bottom:40px; 
 
    }

Answer 1

你必須clear浮動元素後，添加到clear: both#footer。

#footer {clear: both;} 

https://jsfiddle.net/u0krtdjo/