BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

BFC布局規(guī)則

  1. 內部的Box會在垂直方向，一個接一個地放置。

  2. Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊

  3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

  4. BFC的區(qū)域不會與float box重疊。

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

  6. 計算BFC的高度時，浮動元素也參與計算

BFC創(chuàng)建方式

  1. float:left/right

  2. position:absolute/fixed

  3. display:inline-block/table-cell/table-caption

  4. overflow:hidden/auto/scroll

  5. 根元素

BFC解決問題

1、父元素maigin-top與子元素margin-top塌陷：

網友評論