<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
div{border: 1px solid red;}
</style>
</head>
<body>
<div style="width: 500px; height:300px;">
<div style="width:200px; height:200px"></div>
<div style="width:200px; height:200px; float:right;"></div>
</div>
</body>
</html>
这时候，我们会发现，向右浮动的div无法与前面一个div在同一行显示，但并不是div的宽度问题，宽度本身是够用的。
我们把代码修改一下，把float:right的那个div放到普通的div的前面，结果就正常了。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div{border: 1px solid red;}
</style>
</head>
<body>
<div style="width: 500px; height:300px;">
<div style="width:200px; height:200px; float:right;">到前面来了</div>
<div style="width:200px; height:200px"></div>
</div>
</body>
所以，这里得出一个结果，带float:right的元素要放到正常的float的前面来写。