.top{width:800px;height:100px;background:#ccc;}
.main{width:800px;height:600px;background:red;}
.left{width:200px;height:600px;background:blue;float:left;}
.right{width:590px;height:600px;background:#9c9;float:right;}
.foot{width:800px;height:50px;background:#f63;clear:both;}
.main{width:800px;height:600px;background:red;}
.left{width:200px;height:600px;background:blue;float:left;}
.right{width:590px;height:600px;background:#9c9;float:right;}
.foot{width:800px;height:50px;background:#f63;clear:both;}
最赞回答 / Aishah_MK
我的问题解决了，来回复一下。“被浮动的元素已经从元素流中取出，所以浏览器会正常摆放其他元素（块元素）而忽略被浮动的元素，但是浏览器在布置内联元素时会考虑到被浮动元素的边框，让内联元素围绕着被浮动元素。”这是我在书上看到的，意思是div footer已经感受不到div main了，但是div footer还感受得到div main的边框，所以footer div跑上去了，但是里面的文字（内联元素）被挡在下面了。
2016-08-25
已采纳回答 / stonecheng
我觉得，你需要去理解一下标准文档流（flow）。我只知道有float和postion：absolute可以将元素从文档流中抽离出来。问题1：top{position:relative}没有将top从文档流中抽离出来。所以top和head还是在文档流中，top类中内容“top”，会占一行。所以head从下一行开始。将内容“top"删除，就可以看到高度填满了。问题2：没有用“position:absolute;top:0;left:0;”的话，类left和类right都块元素，且在文档流中，两者都要占整行，所...
2016-08-24
.top{height:100px;background:#ccc;}
.main{width:100%;background:red;}
.left{width:200px;height:600px;background:blue}
.right{margin-left:210px;position:absolute;height:600px;width:100%;background:#9c9;}
.foot{height:50px;background:#f63;}
left不能再设置绝对定位了，不然foot会跑上去，main的红色也会被盖住。
.main{width:100%;background:red;}
.left{width:200px;height:600px;background:blue}
.right{margin-left:210px;position:absolute;height:600px;width:100%;background:#9c9;}
.foot{height:50px;background:#f63;}
left不能再设置绝对定位了，不然foot会跑上去，main的红色也会被盖住。
已采纳回答 / wang_linda
.main{ height:600px;margin:0 310px 210px;background:#9CF}这句话里面少了一个0吧，在310px和210px中间应该加个0， “.main{ height:600px;margin:0 310px 0 210px;background:#9CF}”
2016-08-24
已采纳回答 / 前端小菜鸟_2017
把 body { margin: 0; padding: 0; } 改成 *{ margin: 0; padding: 0; }清除所有元素样式
2016-08-24
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px; background:#ccc}
.main{background:red;}
.left{ width:200px; height:500px; background:blue;float:left; }
.right{ margin-left:210px;height:500px; background:#9C9;}
.foot{ height:50px; background:#F63;}
.top{height:100px; background:#ccc}
.main{background:red;}
.left{ width:200px; height:500px; background:blue;float:left; }
.right{ margin-left:210px;height:500px; background:#9C9;}
.foot{ height:50px; background:#F63;}
