这才是正确答案!
.top{background:gray;height:60px;}
.main{background:red;height:400px;position:relative;}
.left{background:blue;position:absolute;left:0;top:0;width:200px;height:400px;}
.right{background:green;height:400px;margin-left: 210px;}
.foot{background:orange;height:60px;}
.top{background:gray;height:60px;}
.main{background:red;height:400px;position:relative;}
.left{background:blue;position:absolute;left:0;top:0;width:200px;height:400px;}
.right{background:green;height:400px;margin-left: 210px;}
.foot{background:orange;height:60px;}
.top{height:100px;margin:0 aotu;background-color:gray}
.main{height:500px;background-color:red}
.left{height:100%; width:200px;background-color:Blue;}
.right{ height:100%;width:100%;background-color:green;float:left;margin-left:210px}
.foot{height:100px;background-color:orange;;width:100%}
.main{height:500px;background-color:red}
.left{height:100%; width:200px;background-color:Blue;}
.right{ height:100%;width:100%;background-color:green;float:left;margin-left:210px}
.foot{height:100px;background-color:orange;;width:100%}
一开始一直没想通为什么,footer会跑到最上面去被浮动的遮盖住,后来终于明白了,浮动元素会对和父元素同级元素产生排版影响
<div class="main">
2222222222222222222222222222222222222222222222222222
<div class="left">1111111111111</div>
3333333333333333333333333333333333333333333333
</div>
<div class="footer">footer</div>
这样就能看出来为什么了。。
<div class="main">
2222222222222222222222222222222222222222222222222222
<div class="left">1111111111111</div>
3333333333333333333333333333333333333333333333
</div>
<div class="footer">footer</div>
这样就能看出来为什么了。。
.top{height:100px;background-color:gray}
.main{height:500px;background-color:red;position:relative}
.left{ position:absolute;left:0;top:0;width:200px;height:500px;background-color:blue}
.right{margin-left:210px;background-color:#ccc;height:500px}
.foot{height:50px;background-color:orange;clear:both}
.main{height:500px;background-color:red;position:relative}
.left{ position:absolute;left:0;top:0;width:200px;height:500px;background-color:blue}
.right{margin-left:210px;background-color:#ccc;height:500px}
.foot{height:50px;background-color:orange;clear:both}