<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px; background:#ccc}

.main{height:960px;background:red}

.left{width:40%;height:960px;background:blue;float:left}

.right{width:57%;height:960px;background:green;float:right}

.foot{height:50px;background:#f60;}

</style>

因为你的main里面设置了高度height，这样main就有了实际高度，若不设置foot就会往上跑

因为main标签没有设置浮动，所以foot不会重叠

因为浮动 是跟随浮动
跟就就没有脱离标准文档流  是跟随前一个元素浮动的