一.BFC
1. 先說(shuō)說(shuō)FC，F(xiàn)C的含義就是Fomatting Context。它是CSS2.1規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。BFC和IFC都是常見(jiàn)的FC。分別叫做Block Fomatting Context 和Inline Formatting Context。
2. BFC（Block Formatting Context）叫做“塊級(jí)格式化上下文”。BFC的布局規(guī)則如下：
1>.內(nèi)部的盒子會(huì)在垂直方向，一個(gè)個(gè)地放置；
2>.盒子垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的上下margin會(huì)發(fā)生重疊；
3>.每個(gè)元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動(dòng)也是如此；
4>.BFC的區(qū)域不會(huì)與float重疊；
5>.BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之也如此；
6>.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
介紹過(guò)了BFC的布局規(guī)范，再來(lái)說(shuō)說(shuō)哪些元素會(huì)產(chǎn)生BFC。
1>.根元素；
2>.float的屬性不為none；
3>.position為absolute或fixed；
4>.display為inline-block，table-cell，table-caption，flex；
5>.overflow不為visible
二.IFC
IFC布局規(guī)則：
1>框會(huì)從包含塊的頂部開(kāi)始，一個(gè)接一個(gè)地水平擺放。
2>擺放這些框的時(shí)候，它們?cè)谒椒较蛏系耐膺吘唷⑦吙?、?nèi)邊距所占用的空間都會(huì)被考慮在內(nèi)。在垂直方向上，這些框可能會(huì)以不同形式來(lái)對(duì)齊：它們可能會(huì)把底部或頂部對(duì)齊，也可能把其內(nèi)部的文本基線對(duì)齊。能把在一行上的框都完全包含進(jìn)去的一個(gè)矩形區(qū)域，被稱為該行的行框。水平的margin、padding、border有效，垂直無(wú)效。不能指定寬高。
3>行框的寬度是由包含塊和存在的浮動(dòng)來(lái)決定。行框的高度由行高計(jì)算。
得出結(jié)論：
1>.一個(gè)line box總是足夠高對(duì)于包含在它內(nèi)的所有盒子。然后，它也許比包含在它內(nèi)最高的盒子高。(比如，盒子對(duì)齊導(dǎo)致基線提高了)。
2>.當(dāng)盒子B的高度比包含它的line box的高度低，在line box內(nèi)的B的垂值對(duì)齊線通過(guò)’vertical align’屬性決定。當(dāng)幾個(gè)行內(nèi)級(jí)盒子在一個(gè)單獨(dú)的line box內(nèi)不能很好的水平放置，則他們被分配成了2個(gè)或者更多的垂直重疊的line boxs.因此,一個(gè)段落是很多個(gè)line boxs的垂直疊加。Line boxs被疊加沒(méi)有垂直方向上的分離(特殊情況除外)，并且他們也不重疊。
3>.通常，line box的左邊緣挨著它的包含塊的左邊緣，右邊緣挨著它的包含塊的右邊緣。然而，浮動(dòng)盒子也許會(huì)在包含塊邊緣和line box邊緣之間。因此，盡管line boxs在同樣的行內(nèi)格式上下文中通常都有相同的寬度(就是他的包含塊的寬度)，但是水平方向上的空間因?yàn)楦?dòng)被減少了，它的寬度也會(huì)變得復(fù)雜。Line boxs在同樣的行內(nèi)格式上下文中通常在高度上是多樣的(比如，一行也許包含了一個(gè)最高的圖片然后其他的也可以僅僅只包含文字)。
4>.當(dāng)在一行中行內(nèi)級(jí)盒子的總寬度比包含他們的line box的寬度小，他們的在line box中的水平放置位置由’text align’屬性決定。如果屬性是’justify’，用戶代理可能會(huì)拉伸空間和文字在inline boxs內(nèi)。
5>.當(dāng)一個(gè)行內(nèi)盒子超過(guò)了line box的寬度，則它被分割成幾個(gè)盒子并且這些盒子被分配成幾個(gè)橫穿過(guò)的line boxs。如果一個(gè)行內(nèi)盒子不能被分割。則行內(nèi)盒子溢出line box。
6>.當(dāng)一個(gè)行內(nèi)盒子被分割，分割發(fā)生則margins,borders,和padding便沒(méi)有了視覺(jué)效果。
7>.在同樣的line box內(nèi)的行內(nèi)盒子也許會(huì)被分割成幾個(gè)盒子因?yàn)殡p向的文字。
Line boxs在行內(nèi)格式上下文中檔需要包含行內(nèi)級(jí)內(nèi)容時(shí)被創(chuàng)造。Line boxs包含沒(méi)有文字，沒(méi)有空格，沒(méi)有帶著margins,padding和borders，以及沒(méi)有其他在流中的內(nèi)容(比如圖片，行內(nèi)盒子和行內(nèi)表格)，也不會(huì)以新起一行結(jié)尾。對(duì)于在他們內(nèi)的任何盒子的位置都以他們決定并且必須將他們視作沒(méi)有高度的line boxs。
8>主要影響IFC內(nèi)布局的css：
font-size?? line-height??? height?????? vertical-aligin
9>line box : 行盒模型，這是一個(gè)顯示區(qū)域，根據(jù)塊狀容器內(nèi)，每一行的多個(gè)內(nèi)聯(lián)元素（inline-level element）都會(huì)共同生成一個(gè)行盒模型。
常見(jiàn)的屬性，用來(lái)指定文本類型節(jié)點(diǎn)的大小。IFC內(nèi)的很多屬性的值是基于這個(gè)的。
在一個(gè)由多個(gè)內(nèi)聯(lián)元素組成的塊狀容器內(nèi)，’line-height’為內(nèi)聯(lián)元素的行盒模型指定了一個(gè)最低高度。 這個(gè)最低高度是分別由基線上的最小高度和基線下的最小深度組成。
從上到下四條線分別是頂線、中線、基線、底線。 那么行高是指上下文本行的基線間的垂直距離。?
vertical-align
該屬性影響由多個(gè)內(nèi)聯(lián)元素生成的盒模型組成的行內(nèi)盒模型的垂直定位。
vertical有幾個(gè)特定的值，或者指定一個(gè)值。
