之前知道BFC這個概念，但是一直沒怎麼去深入理解，今天看了一下大佬們的部落格，自己總結了一下自己理解的BFC，如果有不對的地方請大佬指正。
常說的兩欄（或多欄）寬度自適應也就是利用了BFC原理。

未觸發BFC的元素

，子元素預設文字行高高於浮動元素時會出現環繞效果，但是浮動元素不參與高度計算；
C（藍色）浮動，不參與A（黃色邊框）的高度計算，所以與B（紅色）有部分重疊；
高度根據文字內容決定。

BFC：內部子元素不會影響外部元素，浮動元素也參與高度計算；

BFC浮動元素參與高度計算；
C（藍色）為浮動元素，但是因為A（黃色）觸發了BFC，C也參與高度計算，A的高度為C的高度（如果比文字高度高），內部子元素不會影響外部元素（B）。

下面我列舉了幾種我認為最常用的幾種觸發方式，還有另外的我覺得沒什麼用就沒列舉。詳細可參考這裡
觸發方式：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、flex（flex佈局，注意拉伸）
4、display的值為table-cell,設定寬度超過瀏覽器視窗寬度，單元格有個非常神奇的特性，就是你寬度值設定地再大，大到西伯利亞，實際寬度也不會超過表格容器的寬度。
5、overflow的值不是visible

結語：好像也沒什麼可說的，平時用的都是框架居多，而且現在佈局多是用flex佈局，畢竟相容性基本上都相容了，但是多理解一些原理總沒錯，面試也可以用