css - 底部的页脚，内容溢出页脚

Question

我的页面布局页脚仍在页面底部。问题是当我使用一些带有 FLOAT 内容的 div 时。如果我省略 float ，则内容会正常运行并且不会溢出页脚。请参阅:

`enter code here`
http://jsfiddle.net/8o7t4wq9/1/


CSS:
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

HTML:
<div id="container">
   <div id="header"></div>
   <div id="body">
       <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
       <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">First box of content</div>
       <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">Second box of content</div>
   </div>
   <div id="footer">FOOTER</div>
</div>

Answer 1

#footer {
   position:absolute;//remove
   bottom:0;//remove
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
    clear:both;//add
}