设置了浮动的元素，页面排序和堆叠会发生变化。浮动元素放置在普通元素和定位元素之间。位置关系如下：

1.根元素

2.正常的元素

3.浮动元素

4.行内元素按正常布局渲染

4.设置了定位的元素

示例如下：（注意元素的前后位置）

1  3  4 68  69 70  71 
72  73 
       
        74 
        
        DIV #175 
        
position: absolute;76 
       
77  78 
       
        79 
        
        DIV #280 
        
float: left;81 
       
82  83 
       
        84 
        
        DIV #385 
        
float: right;86 
       
87 
88 
       
        89 
        
        DIV #490 
        
no positioning91 
       
92 
       
        93 
        
        DIV #594 
        
position: absolute;95 
       
96 这是行内元素97 

 

这里又有一个奇怪的现象，如果将DIV #4的opacity设置一个小于1的数后，DIV #4会向上移动盖在folat元素的上面。该问题会在后面的文章中涉及到。