對於頁面的佈局，前端開發者都大概瞭解：block元素佔據網頁一整行空間，從上到下排列；多個inline元素共享網頁一整行空間，從左到右，超出橫向空間時，則向下排列。但在開發頁面時，會經常遇到浮動高度塌陷、垂直方向上的margin重疊or溢出等場景。雖然利用CSS Hack可以快速解決問題，但其背後的原理始終沒去理解。有時候某個CSS Hack還有副作用，雖然解決了問題，但又新增了其他問題；為此還需要增加一些dom，導致代碼比較冗餘，不利於後續的開發者閲讀代碼。上面説的場景，其背後原理都和BFC有關，接下來就好好了解一下BFC。
什麼是BFC
BFC（Block formatting contexts），塊級格式化上下文。它是獨立的渲染區域，該區域內的子元素不會影響外部的元素。
BFC 佈局特點
- 默認情況下，
BFC內的子元素（content+padding+border+margin）僅能在BFC的content區域內展示。 - float元素也會決定
BFC的高度，從而撐起BFC的高度。
如何創建BFC
- 根元素(<html>)
- 浮動元素（元素的 float 不是 none）
- 絕對定位元素（元素的 position 為 absolute 或 fixed）
- 行內塊元素（元素的 display 為 inline-block）
- 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）
- 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
- 匿名錶格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
- overflow 值不為 visible 和 clip 的塊元素
- display 值為 flow-root 的元素，可以創建無副作用的BFC
- 彈性元素（display為 flex 或 inline-flex元素的直接子元素）
- 網格元素（display為 grid 或 inline-grid 元素的直接子元素）
除display: flow-root方法之外，其他方法或多或少有副作用。因此除非有特殊場景需要，否則建議使用display: flow-root創建BFC。
BFC的實際應用
清除浮動
有了flex佈局之後，float佈局就很少使用了。但在某些文字佈局場景下，float佈局還是有一席之位的。在float佈局流行的時代，都需要處理高度塌陷的問題。接下來，我們用display: flow-root來處理高度塌陷的問題。
動手試試看
阻止子元素的垂直方向margin塌陷
默認情況下，垂直方向上，子元素的margin會與父元素（no padding & border）的margin合併，或者子元素的margin顯示在父元素之外。但這並不是我們期望的，我們期望子元素的margin顯示在父元素的content範圍內。接下來，我們用display: flow-root來處理這個問題。
動手試試看
總結
BFC是頁面上一個隔離的佈局容器，容器裏的子元素不會影響到容器外的元素。利用BFC，可以很好地解決日常開發中的佈局問題。
