.top{height:100px;background:#ccc;}
.main{width:100%;height:400px;background:red;}
.left{ width:200px;height:400px;position:absolute;left:0;background:blue;}
.right{height:400px;width:100%;margin-left:210px;float:left;background:#99cc98;}
.foot {height:50px;background:#ff6733;}
.main{width:100%;height:400px;background:red;}
.left{ width:200px;height:400px;position:absolute;left:0;background:blue;}
.right{height:400px;width:100%;margin-left:210px;float:left;background:#99cc98;}
.foot {height:50px;background:#ff6733;}
个人认为还是最后,说的经典“都是框与框的关系”。在同级别的情况下,前面占用的像素,后面同级别不会占用;只有在其子类中,才能再次修改框内的属性。因为如果不采用clear:both。在960px之外的<div class=main>会显示出footer的背景色;而footer字体却仍在下方,因为<div class="footer">与<div class="main">是同级,不会改变<div class="main">。所以footer在下方。。。不知对不对。都是基于最经典的话理解的。
.top{height:100px;background:#ccc;}
.main{height:600px;background:red;position:relative;}
.left{position:absolute;left:0;top:0;width:200px;height:600px;background:blue;}
.right{height:600px;margin-left:210px;background:green;}
.foot{height:50px;background:orange;}
.main{height:600px;background:red;position:relative;}
.left{position:absolute;left:0;top:0;width:200px;height:600px;background:blue;}
.right{height:600px;margin-left:210px;background:green;}
.foot{height:50px;background:orange;}