body{ margin:0; padding:0;}
.top{height:200px;background:gray;}
.main{background: red;}
.left{background:blue;height:600px;width:200px;float: left;position: absolute;left: 0;top: 200px;}
.right{margin-left: 220px; background:green;height:600px;}
.foot{height:100px;background:#E3860E;}
.top{height:200px;background:gray;}
.main{background: red;}
.left{background:blue;height:600px;width:200px;float: left;position: absolute;left: 0;top: 200px;}
.right{margin-left: 220px; background:green;height:600px;}
.foot{height:100px;background:#E3860E;}
.top{height:100px;background:grey;}
.main{height:600px;background:red;}
.left{ height:600px;background:blue;width:200px;position:absolute;float:left;}
.right{height:600px;background:green;margin-left:210px;position:absolute;float:left;width:100%;}
.foot{height:50px;background:orange;}
.main{height:600px;background:red;}
.left{ height:600px;background:blue;width:200px;position:absolute;float:left;}
.right{height:600px;background:green;margin-left:210px;position:absolute;float:left;width:100%;}
.foot{height:50px;background:orange;}
.top{width:100%;background:gray;height:200px;}
.main{width:100%;background:red;height:500px;}
.left{ width:200px;height:100%;float:left; background:blue;}
.right{width:100%;float:right; background:green;margin-left:220px;position:absolute;}
.foot{width:100%;background:orange;height:100px;}
.main{width:100%;background:red;height:500px;}
.left{ width:200px;height:100%;float:left; background:blue;}
.right{width:100%;float:right; background:green;margin-left:220px;position:absolute;}
.foot{width:100%;background:orange;height:100px;}
.top{width:800px; height:50px;background:#cccccc;}
.main{width:800px; height:300px;background:red;}
.left{width:200px;height:300px;background:blue;position:absolute;left:0;top:50px;}
.right{height:300px;background:#9acc99;margin:0 0 0 210px;}
.foot{width:800px; height:50px;background:#ee6634;}
.main{width:800px; height:300px;background:red;}
.left{width:200px;height:300px;background:blue;position:absolute;left:0;top:50px;}
.right{height:300px;background:#9acc99;margin:0 0 0 210px;}
.foot{width:800px; height:50px;background:#ee6634;}
已采纳回答 / lsnFor
首先你要理解文档流和浮动:文档流:自上而下,从左到右。浮动(两张纸叠放,最下面的是文档流,上面的是浮动元素的位面):脱离文档流。然后分析问题:top元素的子元素head,高度100px,存在于文档流中main元素的子元素left,right高度600px,浮动,脱离文档流footer元素,高度100px,存在于文档流中。文档流(底层)top元素后紧跟footer元素,并不受浮动元素影响,因为不在同一个位面。
2016-11-24