如何在上面div中浮动时压低页脚？

Question

我需要将页脚压低到页面底部，而不管页面上方有多少内容。所以，我没有在互联网上一些搜索，并根据该网站上发现一个解决办法：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

然而，一切工作确定，直到我申请“浮动：左”的内容股利。页脚不再处于底部，并且在中途受到撞击。我的问题是，如果在上面div中浮动时如何保持页脚下降？

请在这里看到这个的jsfiddle我的例子：

http://jsfiddle.net/mEuke/5/

或代码在这里：

<style type="text/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; 
} 

</style> 

<div id="container"> 
    <div id="header"></div> 
    <div id="body"> 

    <div id="test" style="float:left"> 
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/> 
    </div> 
     </div> 


    <div id="footer"></div> 
</div> 

Answer 1

您需要在浮动儿童

的容器使用 clearfix

这是一个现代的clearfix适用于现代浏览器。

#body:after { /* #body is your container */ 
    content: ""; 
    display: table; 
    clear: both; 
} 

这将解决你的问题

演示：http://jsfiddle.net/mEuke/7/

对于一个跨浏览器clearfix阅读本文章：http://css-tricks.com/snippets/css/clear-fix/

什么是clearfix？

一个clearfix是一个元素到本身自动清除的方法，这样你就不需要添加额外的标记。它通常在浮动布局中使用，其中元素浮动以水平堆叠。

clearfix是针对浮动元素对抗zero-height container problem的一种方法。

来源：What is a clearfix?