无法让我的页脚转到页面底部

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">

	<h2>Find Us</h2>

	

</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/