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

BFC布局規(guī)則

  1. 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

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

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

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

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

  6. 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

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塌陷：

網(wǎng)友評(píng)論