浮动float和absolute区别

float浮动：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动float和absolute区别</title>
 6     <style>
 7         .box{
 8             width: 500px;
 9             height: 300px;
10             border: 1px solid black;
11             margin: 0 auto;
12             position: relative;
13         }
14         .first {
15             width: 150px;
16             height: 100px;
17             /*float: left;*/
18             display: inline-block;
19             background: pink;
20             border: 10px solid red;    /*增加了边框*/
21         }
22         .second {
23             width: 100px;
24             height: 100px;
25             background: blue;
26             display: inline-block;
27             float: left;　　　　　　/*只设置一个浮动*/
28         }
29         .third{
30             width: 50px;
31             height: 100px;
32             /*float: left;*/
33             display: inline-block;
34             background: green;
35         }
36     </style>
37 </head>
38  
39 <body>
40  <div class="box">
41     <div class="first">123</div>
42     <div class="second">456</div>
43     <div class="third">789</div>
44  </div>
45 </body>
46 </html>

效果图：

将第27行设置改成position:absolute;如下图

将第27行设置改成position:absolute;加上left:0；如下图

例子3.脱离文档流对比

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动float和absolute区别</title>
 6     <style>
 7         .box{
 8             width: 500px;
 9             height: 300px;
10             border: 1px solid black;
11             margin: 0 auto;
12             position: relative;
13         }
14         .first {
15             width: 150px;
16             height: 100px;
17             /*float: left;*/
18             display: inline-block;
19             background: pink;
20             border: 10px solid red;    /*增加了边框*/
21         }
22         .second {
23             width: 100px;
24             height: 100px;
25             background: blue;
26             display: inline-block;
27             position: absolute;   
28             left:0;
29             opacity: 0.8
30             /*float: left;*/
31 
32         }
33         .third{
34             width: 50px;
35             height: 110px;
36             float: left;
37             display: inline-block;
38             background: green;
39             /*position: absolute;*/
40         }
41     </style>
42 </head>
43  
44 <body>
45  <div class="box">
46     <div class="first">123</div>
47     <div class="second">456</div>
48     <div class="third">789</div>
49  </div>
50 </body>
51 </html>

absolute是脱离文档流优先级更高

原文地址：https://www.cnblogs.com/jing-tian/p/11013867.html