BFC與IFC

參考連接:
https://segmentfault.com/a/11...
https://juejin.im/post/59b73d...
面試之CSS篇 - 邊距重疊與BFC

基礎知識

塊級元素與塊元素

塊級元素

塊級元素是那些視覺上會被格式化成塊狀的元素，通俗一點來講就是那些會換新行的元素。例例如：display屬性爲block, list-item, table, flex, grid。

塊元素

塊元素是 display 屬性值爲 block 的元素，它應該是 塊級元素 的一個子集。

行內級元素與行內元素

行內級元素

行內級元素是那些不會爲自身內容造成新的塊，而讓內容分佈在多行中的元素。
例如：display屬性爲inline, inline-table, inline-block, inline-flex, inline-grid。

行內元素

行內元素僅僅是display屬性值爲inline的元素。

置換和非置換元素

置換元素

瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
常見的置換元素有這些：img,input,textarea,select,button等

置換元素寬度定義

• 若寬高的計算值都爲 auto 且元素有固有寬度，則 width 的使用值爲該固有寬度
• 若寬度的計算值爲 auto 且元素有固有寬度，則 width 的使用值爲該固有寬度
• 若寬度的計算值爲 auto 且高度有 非auto 的計算值，而且元素有固有寬高比，則 width的使用值爲「高度使用值 * 固有寬高比」

好比img 當只定義了其高度值時，其寬度將會根據固有寬高比進行等比設置

• 除此以外，當 width 的計算值爲 auto 時，則寬度的使用值爲 300px

好比iframe, canvas#####置換元素高度定義

置換元素高度定義

• 若寬高的計算值都爲 auto 且元素有固有高度，則height的使用值爲該固有高度
• 若高度的計算值爲 auto 且元素有固有高度，則height的使用值爲該固有高度
• 若高度的計算值爲 auto 且寬度有 非auto 的計算值，而且元素有固有寬高比，則 height 的使用值爲：寬度使用值/固有寬高比
• 若高度的計算值爲 auto 且上述條件徹底不符，則height的使用值不能大於150px，且寬度不能大於長方形高度的2倍

非置換元素

瀏覽器中的大多數元素都是不可置換元素，即其內容直接展現給瀏覽器。

非置換元素，寬度設置是不適用

BFC

BFC全稱」Block Formatting Context」, 中文爲「塊級格式化上下文」。

BFC就是頁面上的一個隔離的渲染區域，容器裏面的子元素不會在佈局上影響到外面的元素，反之也是如此

觸發BFC

• 根元素
• float的值不爲none
• overflow的值爲auto,scroll或hidden
• display的值爲table-cell、table-caption、inline-block、flex 或 inline-flex
• position的值不爲relative和static

BFC佈局規則

1. 內部的盒子會在垂直方向，一個個地放置
2. 盒子垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊
3. 每一個元素的左邊，與包含的盒子的左邊相接觸，即便存在浮動也是如此
4. BFC的區域不會與float重疊
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之也如此
6. 計算BFC的高度時，浮動元素也參與計算

IFC

IFC(Inline Formatting Contexts)直譯爲"內聯格式化上下文"。

IFC佈局規則

1. 在一個IFC中，從父級元素的頂部開始，盒子一個接一個橫向排列
2. 一個line box老是足夠高對於包含在它內的全部盒子。而後，它也許比包含在它內最高的盒子高
3. 當盒子的高度比包含它的line box的高度低，在line box內的盒子的垂直對齊線經過'vertical align'屬性決定
4. 當在一行中行內級盒子的總寬度比包含他們的line box的寬度小，他們的在line box中的水平放置位置由'text align'屬性決定
5. 當一個行內盒子超過了line box的寬度，則它被分割成幾個盒子而且這些盒子被分配成幾個橫穿過的line boxs