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

BFC布局規(guī)則：

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

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

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

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

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

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

哪些元素會(huì)生成 BFC

A. 根元素

B. float 屬性不為 none

C. position 為 absolute 或 fixed

D. display 為 inline-block， table-cell， table-caption， flex， inline-flex

F. overflow 不為 visible


猜你喜歡

彈性盒子布局詳解

什么是流式布局?什么情況下用?