主要參考文件：
http://www.zhangxinxu.com/wor…
https://www.cnblogs.com/dojo-…
測試例子：
https://codepen.io/icyfanfan/…
https://codepen.io/icyfanfan/…
理解文件流對於理解CSS佈局其他相關概念很重要！！
文件流
- 將窗體自上而下劃分為一行一行，在每行中從左至右排放元素，即為文件流
- 每個非浮動塊級元素獨佔一行，浮動元素按規定(left or right)浮在行的一端，若當前行放不下，則起新行再浮動
- 內聯元素不會獨佔一行，幾乎所有元素(內聯、塊級等)都可以生成子行以擺放子元素
- 有三種情況將使得元素脫離文件流而存在，分別是浮動，絕對定位， 固定定位。 但是在IE中浮動元素也存在於文件流中
- 浮動元素不佔任何正常文件流空間，而浮動元素的定位還是基於正常的文件流，然後從文件流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文件流中抽出後，仍然在文件流中的其他元素將忽略該元素並填補他原先的空間
基於文件流，理解定位模式：
相對定位， 即相對於元素在文件流中位置進行偏移。 但保留原佔位。
絕對定位， 即完全脫離文件流， 相對於position屬性非static值的最近父級元素進行偏移。
固定定位， 即完全脫離文件流， 相對於視區進行偏移
塊級元素 BLOCK-LEVEL ELEMENT
標籤：div
特點：
- 一個元素佔一行
- 可設定寬度、高度、行高、邊框、內外邊距
- 未設定寬度的情況下，寬度自動填滿外部容器
- 內部可以容納其他塊級元素或者內聯元素
塊狀元素的流體特性
塊狀水平元素，如div元素，在預設情況下（未定義寬度、非浮動絕對定位等），水平方向會自動填滿外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，實際內容區域會響應變窄。
內聯元素 INLINE ELEMENT
標籤：span
特點：
- 和其他內聯特性元素在同一行上，行佈局表現形式
- 不可設定寬度、高度、內外邊距
- 寬度由內部元素決定，可以設定邊框，但邊框的表現是每一行都會被設定（對比塊級元素）
- 內部可以容納文字或其他內聯元素
內聯塊級
display: inline-block
特點：
- 將物件呈現為inline物件，但是物件的內容作為block物件呈現。和其他內聯物件同一行顯示
- 和塊級元素一樣可以設定寬高、內外邊距等
- 內部可以容納
Formatting Context：指頁面中的一個渲染區域，並且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關係和作用。
BFC-BLOCK FORMATTING CONTEXT 塊級格式化上下文
BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素 – 所以，避免margin穿透啊，清除浮動什麼的也好理解了 – from 張鑫旭blog原話
理解：一個獨立的塊級渲染區域，只有Block-level box參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，內部佈局不會受外部影響也不會對外部產生影響
如何產生BFC：
- float的值不為none
- overflow的值不為auto, scroll或hidden
- display的值為table-cell, table-caption或inline-block
（測試時發現display:table也會有觸發bfc，table會預設生成一個匿名的table-cell，正是這個匿名的table-ccell生成了BFC） - position的值不為relative或static
BFC規則
- 生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會摺疊。
- 生成BFC元素的子元素中，每一個子元素做外邊距與包含塊的左邊界相接觸，（對於從右到左的格式化，右外邊距接觸右邊界），即使浮動元素也是如此（儘管子元素的內容區域會由於浮動而壓縮），除非這個子元素也建立了一個新的BFC（如它自身也是一個浮動元素）。
分析：
- 內部的Box會在垂直方向上一個接一個的放置
- 垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）
- 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
- BFC的區域不會與float的元素區域重疊
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素，反之亦然
藉此回憶一下之前學習過的一些佈局知識
垂直方向上，兩個相鄰div margin重疊：其實是在同一個bfc環境中
設定父元素overflow:hidden或浮動父元素能清除浮動影響：其實就是使父元素觸發bfc，讓子元素參與父元素的高度計算
BFC應用
防止margin重疊：將發生重疊的元素放到兩個BFC中（或者使其中一個產生BFC）
清除浮動：略
佈局：利用BFC區域不會與float元素區域重疊的特性，便於實現多欄佈局