.top{height:60px;background:gray;}
.main{height:600px;background:red;position:relative;}
.left{height:600px;width:200px;top:0;left:0;background:blue;position:absolute;}
.right{height:600px;top:0;right:0;left:210px;background:green;position:absolute;}
.foot{height:50px;background-color:orange;}
.main{height:600px;background:red;position:relative;}
.left{height:600px;width:200px;top:0;left:0;background:blue;position:absolute;}
.right{height:600px;top:0;right:0;left:210px;background:green;position:absolute;}
.foot{height:50px;background-color:orange;}
完全可以使用float，但是需要把原题目中的
<div class="right">left</div>
<div class="left">right</div>
改成
<div class="left">left</div>
<div class="right">right</div>
即要注意容器顺序，因为float是跟随。
同时float不仅只使用两列布局，多列同样使用，关键是需要根据实际情况来选择最合适的方式。
<div class="right">left</div>
<div class="left">right</div>
改成
<div class="left">left</div>
<div class="right">right</div>
即要注意容器顺序，因为float是跟随。
同时float不仅只使用两列布局，多列同样使用，关键是需要根据实际情况来选择最合适的方式。
已采纳回答 / 轻合琴箫
div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行； 你可以尝试把clear:both语句清除，然后定义如下的样式 .main{hei...
2016-04-29
最新回答 / 轻合琴箫
三层布局当中把左div和右div使用绝对定位是为了让中间的布局自适应，你可以把浏览器窗口调大调小，会发现中间div也会跟着变大变小，这只是一个方法，你也可以使用左浮右浮，这个时候就要给中间的div加上长度
2016-04-28
用浮动布局也可以如下：
.top{width:100%;height:100px;background:#ccc;}
.main{width:100%;height:500px;background:red;}
.left{width:200px;height:100%;background:blue;float:left;margin-top:-500px;}
.right{height:100%;background:#9acc99;margin-left:210px;}
.foot{width:100%;height:50px;background:#ff6634;}
.top{width:100%;height:100px;background:#ccc;}
.main{width:100%;height:500px;background:red;}
.left{width:200px;height:100%;background:blue;float:left;margin-top:-500px;}
.right{height:100%;background:#9acc99;margin-left:210px;}
.foot{width:100%;height:50px;background:#ff6634;}