CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
準確的說，float浮動屬于半脫離文檔流，1、float浮動跟position:absolute一樣擁有脫離文檔流的功能，但是float雖然脫離了文檔流但是仍然會占據位置，其他的文本內容會按照順序繼續排列——如果你對所有的元素都設置了浮動，你會看到這幾個div并不會重疊，而是會順序排列。可以參考設置display:none,跟visible:hidden的效果。
?
?
其他盒子看不見被float的元素，但是其他盒子里的文本看得見
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是脫離文檔流優先級更高
?
?浮動解析
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{width:500px;height:500px;border: 5px solid green;}.first {width: 200px;height: 200px;border: 3px solid red;float:left; /*左浮動*/}.second {width: 150px;height: 100px;border: 3px solid blue;}.third{width: 110px;height: 100px;border: 3px solid grey;float:left; /*左浮動*/}</style> </head><body><div class="box"><div class="first">123</div><div class="second">456</div><div class="third">789</div></div><div>我是文字</div> </body>效果圖：
圖中
第一個元素紅色邊框——左浮動
第二個元素藍色邊框
第三個元素灰色邊框——左浮動
?注：浮動的意思就是脫離文檔流，什么是浮動脫離文檔流呢？顧名思義，浮動就是相當于把元素漂浮在沒有設置浮動元素的上方（就好比如沒浮動的代表大地，浮動則相當于白云一樣漂浮在天空，而自己則是在比白云更高的高度俯瞰大地，你俯視哦那塊地被白云遮住了，你只能看到白云卻看不到大地，這就是浮動），從圖中就可以看出藍色邊框被紅色邊框覆蓋掉，怪異的是沒浮動的文字內容跑到了浮動之外，通過這些你大概也清楚了吧，float跟absolute都是脫離文檔流的區別。
看到這里你可能會疑惑為什么第三個元素灰色邊框會在紅框中間而不是上方呢？
答：第二個元素沒有設置浮動，第三元素浮動是按第二個浮動的順序和位置去浮動的，第三個元素只有當第四個元素（未設置浮動的情況下）出現才能看出浮動在上方效果
浮動和定位的區別：
浮動還會占據原來的位置
定位會脫離文檔流，不占據原來的位置
?如果三個元素均設置了浮動，則按順序位置并排在一排，產生的問題是會使父元素（沒設置寬高情況下）高度坍塌從而使邊框合并，解決的方法就是清除浮動。
若第二個元素設置了寬高，則第三個元素浮動會漂浮在寬高之外。
?
?浮動float的原本作用是為了實現文字環繞效果
?
轉載于:https://www.cnblogs.com/jing-tian/p/11013867.html
總結
以上是生活随笔為你收集整理的CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： react监听input框里的值
- 下一篇： CSS核心技术详解-核心概念