資訊專欄INFORMATION COLUMN
摘要：完整的說法是屬于同一個的倆個相鄰的的會發生重疊，與方向無關。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。
什么是FC？
Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。
BFC 什么是BFCBlock Formatting Context，塊級格式化上下文，一個獨立的塊級渲染區域，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。
BFC的約束規則內部的BOX會在垂直方向上一個接一個的放置；
垂直方向上的距離由margin決定。（完整的說法是：屬于同一個BFC的倆個相鄰的BOX的margin會發生重疊，與方向無關。）
每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此。（這說明BFC中的子元素不會超出它的包含塊，而position為absolute的元素可以超出它的包含塊邊界）；
BFC的區域不會與float的元素區域重疊；
計算BFC的高度時，浮動子元素也參與計算；
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然；
BFC的應用防止margin發生重疊
防止發生因浮動導致的高度塌陷
怎么生成 BFCfloat的值不為none；
overflow的值不為visible；
display的值為inline-block table-cell table-caption；
position的值為absolute或fixed；
display：table也認為可以生成BFC？其實是在于Table會默認生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC。IFC 什么是IFC
IFC(Inline Formatting Contexts)直譯為"行內格式化上下文"，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的 padding/margin 影響)
IFC有的特性IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂。float元素會位于IFC與與line box之間，使得line box寬度縮短。
IFC中時不可能有塊級元素的，當插入塊級元素時（如p中插入div）會產生兩個匿名塊與div分隔開，即產生兩個IFC，每個IFC對外表現為塊級元素，與div垂直排列。
IFC的應用水平居中：當一個塊要在環境中水平居中時，設置其為inline-block則會在外層產生IFC，通過text-align則可以使其水平居中。
垂直居中：創建一個IFC，用其中一個元素撐開父元素的高度，然后設置其vertical-align:middle，其他行內元素則可以在此父元素下垂直居中。
GFCGFC(GridLayout Formatting Contexts)直譯為"網格布局格式化上下文"，當為一個元素設置display值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格項目（grid item）定義位置和空間。
GFC將改變傳統的布局模式，他將讓布局從一維布局變成了二維布局。簡單的說，有了GFC之后，布局不再局限于單個維度了。這個時候你要實現類似九宮格，拼圖之類的布局效果顯得格外的容易。
FFCFFC(Flex Formatting Contexts)直譯為"自適應格式化上下文"，display值為flex或者inline-flex的元素將會生成自適應容器（flex container）。
Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素，而設置為 inline-flex 的容器則渲染為一個行內元素。
伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何布局。
FFC與BFC的區別FFC與BFC有點兒類似，但仍有以下幾點區別：
Flexbox 不支持 ::first-line 和 ::first-letter 這兩種偽元素
vertical-align 對 Flexbox 中的子元素 是沒有效果的
float 和 clear 屬性對 Flexbox 中的子元素是沒有效果的，也不會使子元素脫離文檔流(但是對Flexbox 是有效果的！)
多欄布局（column-*） 在 Flexbox 中也是失效的，就是說我們不能使用多欄布局在 Flexbox 排列其下的子元素
Flexbox 下的子元素不會繼承父級容器的寬
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113300.html
摘要：完整的說法是屬于同一個的倆個相鄰的的會發生重疊，與方向無關。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...
摘要：直譯為塊級格式化上下文。清除內部元素浮動，撐開高度。解決上下邊距重疊問題，兩個元素分別放至不同的中。元素會位于與與之間，使得寬度縮短。伸縮容器外和伸縮項目內的一切元素都不受影響。原文地址：https://www.xingkongbj.com/blog/css/fc.html FC FC的全稱是：Formatting Contexts，是W3C CSS2.1規范中的一個概念。它是頁面中的一塊渲...
摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...
閱讀 3042·2021-09-03 10:33
閱讀 1269·2019-08-30 15:53
閱讀 2618·2019-08-30 15:45
閱讀 3378·2019-08-30 14:11
閱讀 526·2019-08-30 13:55
閱讀 2581·2019-08-29 15:24
閱讀 1904·2019-08-26 18:26
閱讀 3557·2019-08-26 13:41
