BFC布局規(guī)則介紹，哪些元素會生成 BFC？

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

BFC布局規(guī)則：

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

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

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

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

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

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

哪些元素會生成 BFC

A. 根元素

B. float 屬性不為 none

C. position 為 absolute 或 fixed

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

F. overflow 不為 visible


猜你喜歡

彈性盒子布局詳解

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