.top{width:auto; background:#999; height:100px;}
.main{height:600px;background-color:red;}
.left{width:200px; height:600px;background-color:blue;position:absolute; left:0;top:100px;}
.right{height:600px;background-color:green;margin-left:210px;}
.foot{width:auto; height:50px; background:orange;}
.main{height:600px;background-color:red;}
.left{width:200px; height:600px;background-color:blue;position:absolute; left:0;top:100px;}
.right{height:600px;background-color:green;margin-left:210px;}
.foot{width:auto; height:50px; background:orange;}
已采纳回答 / 丶小八戒
比如在footer块元素之前,你有在别的块元素中设置了左浮动属性:float:left;然后接着你没有用语句 clear:both; 去除浮动;那么假如你的footer块宽度很小的话,那么就会继续漂浮在上一个标签块元素右边,而不会另起一行。那样格局就会乱套。
2015-08-10
.top{height:100px; background-color:#999;}
.main{height:600px;background-color:red;}
.left{width:200px; height:600px;background-color:blue;position:absolute; left:0;top:100px;}
.right{height:600px;background-color:green;margin-left:210px;}
.foot{background-color:#F63;width:auto;}
.main{height:600px;background-color:red;}
.left{width:200px; height:600px;background-color:blue;position:absolute; left:0;top:100px;}
.right{height:600px;background-color:green;margin-left:210px;}
.foot{background-color:#F63;width:auto;}
.top{background-color:#ccc; height:50px;}
.main{background-color:red;height:500px;}
.left{background-color:blue;height:500px;width:200px;position:absolute;left:0;top:50px;}
.right{background-color:#9acc99; height:500px;margin-left:210px;}
.foot{background-color:#ff6634; height:50px;}
.main{background-color:red;height:500px;}
.left{background-color:blue;height:500px;width:200px;position:absolute;left:0;top:50px;}
.right{background-color:#9acc99; height:500px;margin-left:210px;}
.foot{background-color:#ff6634; height:50px;}