詳解BFC【 block formatting context】
BFC這個東西說常見的話你可能不覺得,但是你肯定會常用到,也許你在用的時候也沒想到BFC這東西。那它究竟是什么呢,我們來一起看一下。
官方給出的BFC解釋是這樣的,浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如
inline-blocks, table-cells, 和 table-captions),以及overflow值不為“visiable”的塊級盒子,都會為他們的內容創建新的塊級格式化上下文。在一個塊級格式化上下文里,盒子從包含塊的頂端開始垂直地一個接一個地排列,兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加。
在塊級格式化上下文中,每一個盒子的左外邊緣(margin-left)會觸碰到容器的左邊緣(border-left)(對于從右到左的格式來說,則觸碰到右邊緣),即使存在浮動也是如此,除非這個盒子創建一個新的塊級格式化上下文。
上面反復提到了“
block formatting context”,顯而易見BFC就是他們的縮寫,官方還有”inline formatting context“,那也就是說”formatting context“我們需要仔細的看一下是什么意思,那我們就拆分來看看:formatting:n,格式化的意思,v,使格式化( format的現在分詞 ); 規定…的格式(或形狀、大小、比例等);
context:語境; 上下文; 背景; 環境;
放到一起的意思就是“格式化上下文”,它是頁面中的一塊渲染區域,并且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關系和相互作用。
最常見的Formatting context有
Block fomatting context(簡稱BFC)和Inline formatting context(簡稱IFC)。CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC.Box也是比較重要的一個概念,Box是CSS布局的對象和基本單位, 直觀點來說,就是一個頁面是由很多個Box(即boxes)組成的。元素的類型和display屬性,決定了這個Box的類型。 不同類型的Box, 會參與不同的
Formatting context(一個決定如何渲染文檔的容器),因此Box內的元素會以不同的方式渲染。例如display屬性值為block, list-item, table的元素,會生成block-level box。并且參與block fomatting context。 inline-level box: display屬性為inline, inline-block, inline-table的元素,會生成inline-level box。并且參與
inline formatting context
新聞熱點
疑難解答