因为你使用的是浮动模型，并且没有设置width，因此right的那边width由你字符的长度决定，你试试看把html里的right换成其他字符就知道啦。

另外  foot{heigh:50px;  里面的高度属性少了一个t

因为你右边的div变成了浮动之后div的类型变成了inline-block，所以在你没有设置.right宽度的情况下中间会有很大的空白。建议宽度改成百分比的形式，这样适应性高一点。

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff}

.main{background-color:red;height:800px;}

.top{height:100px;background:#ccc;} 

.left{ width:20%;height:800px;float:left;background:blue;} 

.right{width:79%;height:800px;background:green;float:right} 

.foot{height:50px;clear:both;background:orange;}

</style>