教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

BFC是什么?

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

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

布局規(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


猜你喜歡：

HTML5新增了哪些標(biāo)簽?

H5是什么意思?H5是怎么發(fā)展來(lái)的?

什么是HTML，什么是H5?

0 分享到：
和我們?cè)诰€交談！