BFC 全稱“塊級格式化上下文”(Block Formatting Context)，對應的還有 IFC。BFC 類似一個“結界”，如果一個 DOM 元素具有 BFC，那么它內部的子元素不會影響外面的元素；外面的元素也不會影響到其內部元素。
應用場景：
- 解決浮動子元素導致父元素，高度坍塌的問題
- 解決文字環繞在float 四周的情況
- 解決邊距重疊問題 （父子，兄弟，空元素等）
特性：
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然
- BFC的區域不會與float的元素區域重疊
形成條件:
- html 根元素
- float的值不是none
- position 的值不是static或者relative
- display的值是inline-block,table-cell,table-caption,flex,inline-flex
- overflow的值不是visible
tip：
bfc與元素margin重疊沒有關系,可以參考他人的一個例子:https://demo.crazyming.com/?link=topic/d7/bfc.html