深入了解標準流以及脫標元素的特點
深入了解標準流以及脫標元素的特點
1.標準流（Normal Flow）
默認情況下，元素都是按照normal flow（標準流、常規流、正常流、文檔流）進行排布的。
- 排布順序：在瀏覽器中從左到右，從上到下順序擺放；
- 默認情況下，元素互相之間不存在層疊現象；
2.什麼情況下元素會脫標？
脫離標準流（簡稱「脫標」），那麼什麼情況下元素會脫離標準流呢？常見有以下兩種：
- 元素設置position，並且position的值為fixed或absolute；
- 元素添加浮動float，並且float的值不為none；
3.脫標元素的特點
-
可以隨意設置寬高，寬高默認由內容決定。
-
塊級元素：
-
標準流下的展示（默認佔滿父元素的寬度）；
-
脫標下的展示（寬高由內容撐開）；
-
-
行內元素脫離標準流：
-
標準流下的展示（默認由內容撐開，且不能設置寬高）；
-
脫標下的展示（寬高還是由內容撐開，但是可以設置寬高）；
-
-
-
不再受標準流的約束。
-
不再給父元素彙報寬高數據，也就是不能將父元素撐開。
4.脫標和display有什麼關係？
根據以上脫標元素的特點，可能會有人認為脫標其實就是將元素轉換成了
inline-block，因為其展示效果和設置display: inline-block;效果一致，但是其中的原因卻不是這樣。
當不同元素進行了脫標，對應會展示成display的何種屬性值？在MDN和W3C官方網站上都有進行解釋，並且提供了參考表格：
-
MDN中，以搜索float屬性為例；
-
在W3C官方文檔中，有關於
display、position和float之間的關係進行了說明；
總結：
- 大部分元素在脫標後都會轉換成
block類型。 - 這裡可以拋出一個疑問，
block類型不是佔據父元素的寬度么，為什麼脫標元素最終是由內容撐開的？ - 解答：元素脫標後，已經不受標準流約束，其位置也是不局限在父元素之內，很難說父元素是誰，且塊級（block）元素默認寬高都為
auto，難以參考父元素寬度，所以最好的展示形式就是默認由內容撐開。
