常見的布局方案
在講 BFC 之前怎栽，我們先來了解一下常見的布局方案痕檬，有三種常見方案:
-
普通流 (normal flow)
在普通流中肤寝，元素按照其在 HTML 中的先后位置至上而下布局澳骤，在這個過程中阀圾，行內(nèi)元素水平排列立倍，直到當
行|被占滿然后換行灭红，塊級元素則會被渲染為完整的一個新行，除非另外指定口注，否則所有元素默認都是普通流定
位变擒，也可以說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定寝志。 -
浮動 (float)
在浮動布局中娇斑，元素首先按照普通流的位置出現(xiàn)，然后根據(jù)浮動的方向盡可能的向左邊或右邊偏移材部，其效果與印刷排版中的文本環(huán)繞相似毫缆。 - **絕對定位 (absolute positioning) **
在絕對定位布局中，元素會整體脫離普通流乐导，因此絕對定位元素不會對其兄弟元素造成影響苦丁，而元素具體的位置由絕對定位的坐標決定。
什么是BFC?
定義
根據(jù)w3c規(guī)范中的定義：浮動元素和絕對定位元素物臂，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）旺拉，以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）鹦聪。
布局規(guī)則
- 內(nèi)部的Box會在垂直方向账阻，一個接一個地放置。
- Box垂直方向的距離由margin決定泽本。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
- 每個元素的margin box的左邊（margin-left）淘太， 與容器的左邊緣(border-left)相接觸(對于從左往右的格式化，否則相反)规丽。即使存在浮動也是如此蒲牧。
- BFC的區(qū)域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器赌莺，容器里面的子元素不會影響到外面的元素冰抢。反之也如此。
- 計算BFC的高度時艘狭，浮動元素也參與計算
所以通俗的講挎扰，BFC是一個獨立的渲染環(huán)境翠订，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的遵倦。
哪些元素會生成BFC尽超？
- body 根元素
- 浮動元素：float 除 none 以外的值
- 絕對定位元素：position (absolute、fixed)
- display 為 inline-block梧躺、table-cells似谁、flex
- overflow 除了 visible 以外的值 (hidden、auto掠哥、scroll)
合并外邊距與BFC
在CSS當中巩踏，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊续搀，并且因而所結合成的外邊距稱為折疊外邊距塞琼。
折疊的結果
- 兩個相鄰的外邊距都是正數(shù)時，折疊結果是它們兩者之間較大的值目代。
- 兩個相鄰的外邊距都是負數(shù)時屈梁，折疊結果是兩者絕對值的較大值。
- 兩個外邊距一正一負時榛了，折疊結果是兩者的相加的和在讶。
產(chǎn)生折疊的必備條件：margin必須是鄰接的!
而根據(jù)w3c規(guī)范，兩個margin是鄰接的必須滿足以下條件：
- 必須是處于常規(guī)文檔流（非float和絕對定位）的塊級盒子,并且處于同一個BFC當中霜大。
- 沒有線盒构哺，沒有空隙（clearance，下面會講到）战坤，沒有padding和border將他們分隔開
- 都屬于垂直方向上相鄰的外邊距曙强，可以是下面任意一種情況元素的margin-top與其第一個常規(guī)文檔流的子元素的margin-top
- 元素的margin-bottom與其下一個常規(guī)文檔流的兄弟元素的margin-top
- height為auto的元素的margin-bottom與其最后一個常規(guī)文檔流的子元素的margin-bottom
- 高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素途茫，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom
以上的條件意味著下列的規(guī)則：
- 創(chuàng)建了新的BFC的元素（例如浮動元素或者'overflow'值為'visible'以外的元素）與它的子元素的外邊距不會折疊
- 浮動元素不與任何元素的外邊距產(chǎn)生折疊（包括其父元素和子元素）
- 絕對定位元素不與任何元素的外邊距產(chǎn)生折疊
- nline-block元素不與任何元素的外邊距產(chǎn)生折疊
- 一個常規(guī)文檔流元素的margin-bottom與它下一個常規(guī)文檔流的兄弟元素的margin-top會產(chǎn)生折疊碟嘴，除非它們之間存在間隙（clearance）。
- 一個常規(guī)文檔流元素的margin-top 與其第一個常規(guī)文檔流的子元素的margin-top產(chǎn)生折疊囊卜，條件為父元素不包含 padding 和 border 娜扇，子元素不包含 clearance。
- 一個 'height' 為 'auto' 并且 'min-height' 為 '0'的常規(guī)文檔流元素的 margin-bottom 會與其最后一個常規(guī)文檔流子元素的 margin-bottom 折疊栅组，條件為父元素不包含 padding 和 border 雀瓢，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
- 一個不包含border-top玉掸、border-bottom刃麸、padding-top、padding-bottom的常規(guī)文檔流元素司浪，并且其 'height' 為 0 或 'auto'泊业， 'min-height' 為 '0'把沼，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊吁伺。
