塊級格式化上下文——BFC

塊級格式化上下文——BFC（Box Formatting Content）

定義

BFC是頁面上一個隔離的獨立容器，容器裡的子元素不會影響到外面，反之也是如此

小叙

很多小夥伴在學習bfc的時候不了解bfc到底是個什麼東西，有一種很模糊的感覺，其實小編在第一次接觸到bfc的時候也遇到過同樣的問題，BFC???IFC???FFC這些都是什麼，我給大家的建議是不要試圖了解他的定義，要記住他的用法和觸發bfc的一些方式。

BFC的觸發方式：

• 根元素html
• float屬性不為none時，如

  float:left;

  float:right

• position定位為absolute或者fixed，

  position:absolute;

  position:fixed;

• overflow不為visible，如

  overflow:hidden;

  overflow:scroll;

• display為inline-block,table-cell,table-caption,flex,inline-flex都可以

BFC的布局規則

• 内部box垂直一個接一個放置
• 兩個相鄰的box的margin會重疊
• 計算BFC的高度時，浮動元素也參與計算
• 獨立容器與外部互不影響
• 不與float box重疊

總結

可能這樣說了一堆之後大家還是對BFC不是很了解，下面給大家舉兩個BFC解決問題的例子：

1. 子元素浮動後會脫離文檔流，空間釋放，寬高是由内容撐開的，父元素會産生塌陷，解決方法之一是在父元素上邊加

   overflow:hidden;

   ，就是觸發了bfc，bfc的其中一條排序規則是浮動元素也參與計算高度，是以就解決了這個問題。

1. 同一bfc内相鄰元素的margin會合并，在其中一個元素加上

   position：absolute；

   會觸發BFC，形成一個新的獨立容器，兩個元素不在一個BFC中，就不會margin合并。