css BFC與IFC的理解

2021-09-25 06:43:27 字數 1069 閱讀 8612

bfc(block formatting context)即「塊級格式化上下文」

ifc(inline formatting context)即「行內格式化上下文」。

常規流(也稱標準流、普通流)是乙個文件在被顯示時最常見的布局形態。乙個框在常規流中必須屬於乙個格式化上下文,你可以把bfc想象成乙個大箱子,箱子外邊的元素將不與箱子內的元素產生作用

bfc是w3c css 2.1 規範中的乙個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。當涉及到視覺化布局的時候,block formatting context提供了乙個環境,html元素在這個環境中按照一定規則進行布局。乙個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成bfc,浮動元素內部子元素的主要受該浮動元素影響,兩個浮動元素之間是互不影響的。也可以說bfc就是乙個作用範圍。

在普通流中的 box(框) 屬於一種 formatting context(格式化上下文) ,型別可以是 block ,或者是 inline ,但不能同時屬於這兩者。並且, block boxes(塊框) 在 block formatting context(塊格式化上下文) 裡格式化, inline boxes(塊內框) 則在 inline formatting context(行內格式化上下文) 裡格式化。

當乙個html元素滿足下面條件的任何一點,都可以產生block formatting context:

a、float的值不為none

b、overflow的值不為visible

c、display的值為table-cell, table-caption, inline-block中的任何乙個

d、position的值不為relative和static

css3觸發bfc方式則可以簡單描述為:在元素定位非static,relative的情況下觸發,float也是一種定位方式。

不和浮動元素重疊,清除外部浮動,阻止浮動元素覆蓋

如果乙個浮動元素後面跟著乙個非浮動的元素,那麼就會產生乙個重疊的現象。常規流(也稱標準流、普通流)是乙個文件在被顯示時最常見的布局形態,當float不為none時,position為absolute、fixed時元素將脫離標準流。

IFC 標準的定義

ifc 標準是 iai international alliance forinteroperability 針對建築工程特性,專為 bim 技術制定的資料交換標準,採用 express 語言定義所有資料。express 語言是一種物件導向的資料規範語言,由一種無歧義物件定義的語言元素和對定義物件限...

看完絕對懂的IFC

ifc inline formatting context 行內格式化上下文。與塊級元素形成對比,當元素的 css 屬性 display 的計算值為 inline,inline block,inline table,inline flex 或 inline grid 時,它是行內級元素。視覺上它將內...

IFC中的軸網(IfcGrid)

軸網是定義在三維空間中的二維網格,用於構件定位。軸網可用於平面,剖面或相對於世界座標系的任何位置,也可以相對於其它構件或其它軸網放置。軸網是二維曲線 如線,圓,弧,折線等 的組合,通常情況下,三維座標系的xy平面用於放置軸網。軸網 ifcgrid 主要包括 1 uaxes 網格軸列表。2 vaxes...