已采纳回答 / chachakun
应该这样理解：当块添加了浮动以后，它是脱离了原来的文档流（大致值文档结构）的，所以没有的添加的浮动的块（处于原来的文档流中）就会上去补充，所以footer就会跑到main上面。找到一篇好文，可以看看：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
2016-03-09
.top{height:100px;background:#ccc;}
.main{height:600px;background:red}
.left{height:600px;width:200px;float:left;background:blue;position:absolute;}
.right{height:600px;;float:right;width:80%;;background:indigo;}
.foot{height:100px;background:orange}
.main{height:600px;background:red}
.left{height:600px;width:200px;float:left;background:blue;position:absolute;}
.right{height:600px;;float:right;width:80%;;background:indigo;}
.foot{height:100px;background:orange}
已采纳回答 / MissySue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-...
2016-03-09
.top{height:30px;background-color:#ccc;}
.main{background:#fb0000;overflow:hidden;position:relative;}
.left{ width:200px;background-color:#0000fe;height:600px;position:absolute;top:0;left:0;}
.right{background-color:#ccc;height:600px;margin-left:210px;}
.foot{height:30px;background-color:#ff6634;}
.main{background:#fb0000;overflow:hidden;position:relative;}
.left{ width:200px;background-color:#0000fe;height:600px;position:absolute;top:0;left:0;}
.right{background-color:#ccc;height:600px;margin-left:210px;}
.foot{height:30px;background-color:#ff6634;}
.top{height:100px;background:#ccc;}
.main{height:400px;background:#900;}
.left{ height:400px;width:200px;background:#00c;position:absolute;top:100px;left:0px;}
.right{height:400px;background:#1f6;margin-left:210px;}
.foot{height:100px;background:#cac;}
.main{height:400px;background:#900;}
.left{ height:400px;width:200px;background:#00c;position:absolute;top:100px;left:0px;}
.right{height:400px;background:#1f6;margin-left:210px;}
.foot{height:100px;background:#cac;}
width:100%;height:100px;background:gray
width:100%;height:600px;background:red;position:relative
width:200px;height:600px;background:blue;position:absolute;top:0;left:0
height:600px;background-color:green;position:absolute;top:0;left:210px;width:100%
width:100%;height:100px;background:orange
width:100%;height:600px;background:red;position:relative
width:200px;height:600px;background:blue;position:absolute;top:0;left:0
height:600px;background-color:green;position:absolute;top:0;left:210px;width:100%
width:100%;height:100px;background:orange
.top{width:100%; background: gray;height: 50px}
.main{width: 100%;background: red;height: 600px;}
.left{ width: 35%;height: 600px;float: left;background: blue;}
.right{width: 60%; height: 600px;background:green;float: right;}
.foot{width: 100%;height: 50px;background:orange;}
.main{width: 100%;background: red;height: 600px;}
.left{ width: 35%;height: 600px;float: left;background: blue;}
.right{width: 60%; height: 600px;background:green;float: right;}
.foot{width: 100%;height: 50px;background:orange;}
