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是脱离文档流优先级更高
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
原文：https://www.cnblogs.com/jing-tian/p/11013867.html