.main{ height:400px; background:#FF6699; }
.left{ width:200px; height:400px; background:#FFFF00; float:left; position:absolute; }
.right{ height:400px; background:#CC3300; float:left; margin-left:210px; width:100%; }
.foot{ height:100px; background:#CCCCCC; clear:both; }
.left{ width:200px; height:400px; background:#FFFF00; float:left; position:absolute; }
.right{ height:400px; background:#CC3300; float:left; margin-left:210px; width:100%; }
.foot{ height:100px; background:#CCCCCC; clear:both; }
footer上面main里有四个div都用到了float，不占文档层，即浮动在最上面。footer如果不用清除层的话，会自动紧跟top层(此层没用到float)。故footer要用clear:both ,把浮动层都去掉，自己再另占一行。
.left{ height:600px; width:200px; position:absolute; top:0; background:#0066FF;}
.main{ height:600px; background:#FFCC00; margin:0px 310px 0px 210px;}
.right{ width:300px; height:600px; background:#CCCCCC; position:absolute; right:0; top:0}
.main{ height:600px; background:#FFCC00; margin:0px 310px 0px 210px;}
.right{ width:300px; height:600px; background:#CCCCCC; position:absolute; right:0; top:0}
已采纳回答 / 梁子1
你首先应该理解的是，分层的概念，也就是说，文档流，position，float其实是三个层，每个层之间都是相互拦截的。如果元素离开了文档流，那么float就会票起来。所以，如果你需要设置自适应的话，不应该用float，因为float必须要有宽度，虽然可以飘起来。但是position，就没有宽度要求，还可以漂起来。所以一般的自适应宽度使用position实现，才是合理的标准做法， 兼容性也好！
2016-03-09
已采纳回答 / chachakun
应该这样理解：当块添加了浮动以后，它是脱离了原来的文档流（大致值文档结构）的，所以没有的添加的浮动的块（处于原来的文档流中）就会上去补充，所以footer就会跑到main上面。找到一篇好文，可以看看：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
2016-03-09