CSS佈局相關基本概念

主要參考文檔：
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（如它自身也是一個浮動元素）。

分析：

1. 內部的Box會在垂直方向上一個接一個的放置
2. 垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）
3. 每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）
4. BFC的區域不會與float的元素區域重疊
5. 計算BFC的高度時，浮動子元素也參與計算
6. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然

藉此回憶一下以前學習過的一些佈局知識
垂直方向上，兩個相鄰div margin重疊：實際上是在同一個bfc環境中
設置父元素overflow:hidden或浮動父元素能清除浮動影響：其實就是使父元素觸發bfc，讓子元素參與父元素的高度計算

BFC應用防止margin重疊：將發生重疊的元素放到兩個BFC中（或者使其中一個產生BFC）清除浮動：略佈局：利用BFC區域不會與float元素區域重疊的特性，便於實現多欄佈局