首頁技術(shù)文章正文

BFC是什么?

更新時間:2020年09月09日18時03分來源:傳智播客瀏覽次數(shù):

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

布局規(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 的高度時，浮動元素也參與計算。

A. 根元素

B. float 屬性不為 none

C. position 為 absolute 或 fixed

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

F. overflow 不為 visible

猜你喜歡：

上一篇：html中figcaption標(biāo)簽的作用 下一篇：px rem em區(qū)別有哪些？各有什么作用？