《這是一篇css2-3的布局規則0.000001覽》
bfc -- block formatting context 塊級格式上下文
塊級元素（block-level elements）-- display:block/list-item/table/flex
塊級盒（block-level boxes）-- 塊級盒是指參與了bfc的盒子，塊級元素都會生成包含後代元素和生成內容的自身原本的盒子，並且這個盒子會參與任何位置計算(利用父元素的bfc清除浮動的原理，另外還有clearfix的清除法)！
1. content box(content/inner edge * 4)
conent的四條邊構成了content box
2. padding box(padding edge * 4)
padding的四條邊構成了padding box
3. border box(border edge * 4)
border的四條邊構成了border box
4. margin box(margin * 4)
margin的四條邊構成了margin box。(外邊距的上下合併解決方法，給父元素新增border,or為父元素設定bfc特性)
包含塊（containing block）-- 最近的塊級祖先元素的content box
塊級排版上下文 bfc --
1. bfc布局是從包含塊的頂部開始垂直向下，外邊距會合併(僅指處於同一bfc的相鄰塊級盒)，由普通文件流中的塊級盒參與，body是root bfc。那麼脫離文件流的元素布局呢？來看其他能建立新的bfc的情況：
1) position: absolute;
2) overflow: ！visible;的塊級盒子
3) float:left/right;
4) 不是塊級盒子的block containers比如 display:inline-block/table-cell/table-caption
新的bfc裡面的布局不影響外面的，反之亦然。
2. 在bfc中，每個盒子的左外邊框緊靠他的包含塊的左邊框（從右到左則為右邊框緊挨），即使相鄰元素存在著浮動（但盒子的邊框會因這個浮動而收縮），除非這個盒子的內部建立了乙個新的bfc（此時盒子因為相鄰元素的浮動而變窄），這是盒子左外邊框就跑到浮動元素右/後邊去了。典型的例子是文字環繞浮動的。
ifc -- inline formatting contexts （內聯格式上下文）
行內元素/內聯元素（inline-level elements） -- 是指那些不會形成新的內容塊的源文件的元素，內容被分布在行間，例如，內容段落或內聯。-- display:inline/inline-table/inline-block. 行內元素生成行級盒子
inline-level box -- 行內級盒子，參與ifc內聯格式上下文。
inline box -- 行內盒子，既是內聯的(inline-level)，同時他的內容參與他的ifc的。例如display:inline產生乙個行內盒子，但是置換元素/inline-block/inline-table產生的不是行內盒子。。。
ifc --
1) 在ifc中，所有盒子乙個接乙個水平排列，從包含塊的頂部開始。這些盒子之間的水平margins,borders和paddings互不影響，不合併。盒子可以通過多種方式實現垂直居中/上/下/基線... 包含這些形成一行的矩形區域叫做line box行盒。
2) 行盒的寬度由他的包含塊和出現的floats共同決定，高度規則：
行盒中的每個行內級盒子大小 vs 置換元素/inline-block/inline-table元素的margin box高度 vs 行內盒子的line-height 中的最高者。
行內級盒子可以通過他們的vertical-align實現對齊方式，同時影響行盒高度。
行盒的高度是最高的盒子的頂部到最低的盒子底部之間的距離。
空的內聯元素inline element產生空的行內盒子，仍可有margin border padding line-height
3) 行盒總是足夠高來包含他內部的盒子們，也可能比內部最高的盒子高(例如盒子基線對齊)。當乙個盒子高度小於包含它的行盒時，該盒子的垂直對齊由vertical-align決定。當幾個盒子水平方向不能裝在乙個行盒時，他們被分發一堆垂直的行盒，因此，乙個段落就是一堆垂直的行盒。行盒們沒有垂直的隔離地堆積在一起 ，並且他們不會重疊。
4) 一般地，行盒的左邊觸碰到他的包含塊的左邊，右邊觸碰包含塊的右邊，但是，浮動盒子可能會出現在包含塊的邊和行盒的邊之間，因此，儘管統一ifc中的行盒一般會有相同的寬度（即包含塊的寬度），但是他們的寬度可能不同當水平空間因為float而減少時。統一ifc的行盒的高度是不同的。
5) 當一行的行內級盒子寬度總和比包含它們的行盒小時，他們的水平分布由text-align決定。如果取值justify那麼使用者**也可能在行盒拉伸空間和文字（inline-table和inline-block盒子不適用）.
6) 當行內盒子超出行盒寬度時，他會被分割成幾個盒子，這些盒子分布到幾個行盒中。如果乙個行內盒子不能被分割開（例如行內盒子包含單個字母，特殊的不允許在行內盒子斷字的語言 或white-space:nowrap/pre），那麼行內盒子溢位行盒（水平方向）。
7) 當行內盒子被分割時，margins,borders,paddings在分割發生的地方沒有可見的效果（或者有很多分割時的每乙個分割）
8) 行內盒子也可以被分割成位於同一行盒的盒子， 參考'direction' and 'unicode-bidi' ！！！
9) 行盒在ifc中被建立來hold行內級內容的，那些不包含文字，不包含preserved white space，不包含margin/padding/border非0的行內元素，不包含其他in-flow內容（如image，inline blocks, inline tables），不以preservered newline結束的行盒必須被看做高度為0的行盒以便於決定他們內部的元素的定位，並且必須被視為不存在的。
例如：
in thissentence, dear.在p的塊盒總包含5ge行內盒子，em盒子，strong盒子和3個匿名盒子。p的塊盒生成行盒的包含塊，包含塊足夠到時，只有乙個行盒就夠了；否則就會有多個行盒，行內盒子可能被分割。 下面是w3c官網的示例，em盒子設定了margin，padding，border，並且它被分割了，可以看到emphasized之後，words之前沒有任何padding，margin，border的視覺化效果。前端css布局之BFC
哈嘍，各位小夥伴好！今天來整理下前端關於css布局的乙個知識點 bfc block fomatting context 如果知識點梳理有出錯的地方，望夥伴們幫忙指出，一起進步 bfc 可以理解為建立乙個布局容器，容器裡按自己的方式來布局，且與容器外界的元素互不影響。wrap fl div 這是div...
CSS布局基礎BFC
bfc是什麼？第一次看到這個名詞，我是拒絕的，css什麼時候還有這個東西？於是迫不及待的google了一下，才發現原來它無時無刻不在我們的css當中，只不過它並不是乙個屬性，不需要我們平常使用手寫罷了。但是它的重要性確是槓槓的，可以這麼說，沒有它就就沒有什麼css布局 bfc,全稱 block fo...
IFC和bfc的知識點。
ifc和bfc的知識點。ifc ifc inline formatting context 即 內格式化上下 平 向上的margin，border和padding在框之間得到 保留。框在垂直 向上可以以不同的 式對 它們的頂部或底部對 或根據其中 字的基線對 包含那些框的 形區域，會形成 叫做 框 ...