前端開發-BFC-BEM

BFC佈局規則：

1. 內部的Box會在垂直方向，一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算
   
   一、在建立了 Block Formatting Context 的元素中，其子元素按文檔流一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。

       根據 CSS 2.1 8.3.1 Collapsing margins 第一條，兩個相鄰的普通流中的塊框在垂直位置的空白邊會發生摺疊現象。也就是處於同一個BFC中的兩個垂直窗口的margin會重疊。

       根據 CSS 2.1 8.3.1 Collapsing margins 第三條，生成 block formatting context 的元素不會和在流中的子元素髮生空白邊摺疊。因此解決這種問題的辦法是要爲兩個容器添加具備BFC的包裹容器。

   二、在 Block Formatting Context 中，每個元素左外邊與包含塊的左邊相接觸（對於從右到左的格式化，右外邊接觸右邊）， 即便存在浮動也是如此（儘管一個元素的內容區域會因爲浮動而壓縮），除非這個元素也建立了一個新的 Block Formatting Context 。

   三、Block Formatting Context就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會在佈局上影響到外面的元素，反之也是如此。

   四、根據 CSS 2.1 9.5 Floats 中的描述，建立了 Block Formatting Context 的元素不能與浮動元素重疊。

       表格的 border-box、塊級的替換元素、或是在普通流中建立了新的 block formatting context（如元素的 'overflow' 特性不爲 'visible' 時）的元素不能夠與位於相同的 block formatting context 中的浮動元素相重疊。

   5 、當容器有足夠的剩餘空間容納 BFC 的寬度時，全部瀏覽器都會將 BFC 放置在浮動元素所在行的剩餘空間內。 

   六、 在 IE6 IE7 IE8 Chrome Opera 中，當 BFC 的寬度介於 "容器剩餘寬度" 與 "容器寬度" 之間時，BFC 會顯示在浮動元素的下一行；在 Safari 中，BFC 則仍然保持顯示在浮動元素所在行，而且 BFC 溢出容器；在 Firefox 中，當容器自己也建立了 BFC 或者容器的 'padding-top'、'border-top-width' 這些特性不都爲 0 時表現與 IE8(S)、Chrome 相似，不然表現與 Safari 相似。