前端程序員在布局頁面時，經常會遇到各種煩人的小問題，比如：每個元素都是一個盒子，盒子外的父元素應該不會受到盒內子的子元素影響，可是事實是這樣的嗎？
往往，我們會看到子元素浮動后，父元素高度沒有了，兩欄布局時右側沒有自適應，垂直方向上上下兩個元素外邊距不太對
從常理上來說，被包含在父元素里的元素是不會影響到父元素旁邊的元素，但實際上并不總是如此，那么有沒有什么辦法能讓里面的元素和外部真正隔離開呢？
==> 解決辦法就是：BFC
BFC = Block Formatting context 意思是“塊級格式化上下文”，W3C的解釋是：它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用，當涉及到可視化布局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。
其實，我們只要記住：BFC的目的就是：形成一個完全獨立的空間，讓空間中的子元素不會影響到外面的布局。如何才能形成這樣一個神奇的空間呢？我們通過CSS為元素設置一些屬性，就能觸發，常用的有四種：
- float不為none
- postion不為relative和static
- overflow為auto scroll和hidden
- display的值為inline-block
在知道觸發規則之后，我們再來看下能解決什么問題呢？
- 解決浮動元素令父元素高度塌陷的問題
如，父元素div包含幾個子div，這幾個子元素都為浮動時，父元素高度坍塌，這是因為浮動的子元素脫離了文檔流，漂浮于父元素之上，父元素檢測不到子元素的存在，獲取不到子元素高度，所以看起來父元素沒有高度了。父元素后面的布局也就亂了，這時，可以給父元素添加屬性overflow：hidden，當然，這只是一種BFC的做法，還可以display: table-cell;或position: fixed;或position: absolute;
觸發了BFC的容器就是頁面上的一個完全隔離開的容器，容器里的子元素絕對不會影響到外面的元素，為了保證這個規則，觸發了BFC的父元素在計算高度時，不得不讓浮動的子元素也參與進來，變相的實現了清楚內部浮動的目的。
但有的時候出于布局需要也可能無法給父元素設置這些屬性，解決高度坍塌還有讓父元素也浮動起來，或添加一個高度，但這種適用于已知道子元素高度
解決自適應布局的問題
PC端的網頁，左右兩欄布局很常見，一般左側定寬，右側主體頁面寬度自適應變化，通常是用浮動來實現的；它利用了塊級元素占滿一行的特性，使得右邊的元素可以隨著頁面寬度的變化而變化，又利用了浮動的特性，讓左側元素覆蓋在右側元素上方，同時還能擠開下方元素的內容，讓頁面看起來是兩欄的效果，但隨著右邊元素的增加，超出了左邊元素的高度后，文字就會環繞左側元素，這顯然不是我們想要的效果，因為右側元素觸發了BFC，觸發BFC的容器就是頁面上的一個完全隔離開的容器，容器中的子元素絕對不會影響到外面的元素，為了保證這個規則，觸發了BFC的右側元素為了將內部元素和左側浮動元素隔離開，不得不形成這樣左右完全隔離的兩欄，同時，如果右側元素依舊是塊級元素，那么他盡可能占滿一行的特性還在，這樣就保證了右側元素依舊是自適應的解決外邊距垂直方向重合問題
垂直方向上兩個兄弟元素外邊距會取最大值，而不是取和，那么我們可以通過觸發BFC來防止他們之間相互影響。為其中一個元素的外邊包裹一層父元素，并且觸發父元素BFC，比如：overflow：hidden，這樣打破原有格局，就不再會重疊啦！
另外我們可以用padding來代替marging，有點是簡單易懂，缺點是如果根據設計本來就需要設置padding樣式，那就沒辦法用了
總結一下，觸發BFC可以解決：
- 浮動元素的父元素高度塌陷
- 兩欄自適應布局
- 外邊距垂直方向重合
