最赞回答 / ZE明
使用clear:right/left都可以是因为取消浮动后元素能撑开main,所以就能将foot弄到main下面。因为要添加的高度是main占用的高度,因为main没设置高度,里面的元素又是浮动的,所以main没被撑开,可以忽略它的高度,所以要用600px才能让foot到两个浮动的下面去,而100px是head规定的高度,不用加进去。
2018-01-25
.top{width:100%; height:50px;background:gray;}
.main{width:100%; height:300px;background:red;}
.left{width:200px;height:300px;background:blue;position:absolute;}
.right{margin-left:210px;width:100%;height:300px;background:green;position:absolute;}
.foot{width:100%; height:50px;background:#369;}
.main{width:100%; height:300px;background:red;}
.left{width:200px;height:300px;background:blue;position:absolute;}
.right{margin-left:210px;width:100%;height:300px;background:green;position:absolute;}
.foot{width:100%; height:50px;background:#369;}
.top{width:100%;height:100px;background:grey;}
.main{height:300px;width:100%;background:red;}
.left{width:200px;background:blue;height:300px;position:absolute;top:100px;}
.right{height:300px;margin-left:210px;background:green;width:100%;}
.foot{width:100%;height:100px;background:orange;}
.main{height:300px;width:100%;background:red;}
.left{width:200px;background:blue;height:300px;position:absolute;top:100px;}
.right{height:300px;margin-left:210px;background:green;width:100%;}
.foot{width:100%;height:100px;background:orange;}