浮动盒子重叠问题

我想像两个盒子的文本也会完全重叠起来，可现实不是这样，为什么？请高手说明
FIREFOX查看

xml 代码

1. <style>  
2. .box   
3.     {   
4.         background:#3399FF;   
5.         padding:10px;   
6.         border:2px #FF6600 dashed;   
7.         height:80px;   
8.         width:80px;   
9.     }   
10. </style>  
11. <div class="box" style="float:left">盒子1</div>  
12. <div class="box">盒子2</div>  

 

答案

1、如果浮动元素在非浮动块元素之后，则浮动元素将会出现在非浮动块元素的下方；
2、如果浮动元素在非浮动块元素之前，则非浮动块元素内容将会显示浮动块元素行后。
3、在浮动元素之后的非浮动块元素会无视该浮动元素的存在，显示在与浮动元素开始的位置，浮动元素显示在非浮动块元素之上。

http://www.planabc.net/article.asp?id=120