为什么div覆盖了，相互的内容却没覆盖呢？
<html>
<head><title>混合布局</title>
<style type="text/css">
.top{height:100px;background:gray;}
.left{height:400px;width:200px;float:left;background:blue;}
.right{height:400px;width:700px;float:right;background:green;}
.foot{height:500px;background:orange;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="foot">foot</div>
</body>
</html>
