一、 BFC的概念和應(yīng)用
1. BFC的概念
BFC的全稱是 Block Formatting Contexts，塊級格式化上下文，是頁面中的一塊渲染區(qū)域，他擁有一套渲染規(guī)則，決定內(nèi)部的子元素如何定位，以及和其他元素的關(guān)系和相互作用。說白了就是一個決定如何渲染元素的容器。
2. BFC的渲染規(guī)則
- 內(nèi)部的塊級元素會再垂直方向一個接一個的放置
- 塊級元素垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰塊級元素的margin會發(fā)生重疊
- 對于從左往右的格式化，每個元素（塊級元素與行內(nèi)元素）的左邊緣，與包含塊的左邊緣相接觸，(對于從右往左的格式化則相反)。即使包含塊中的元素存在浮動也是如此，除非其中元素再生成一個BFC。
- BFC的區(qū)域不會與浮動元素重疊
這點是BFC最重要的一點渲染規(guī)則，可以用這個規(guī)則解決很多布局的問題。 - BFC是一個隔離的獨立容器，容器里面的子元素和外面的元素互不影響。
- 計算BFC容器的高度時，浮動元素也參與計算。
這個規(guī)則，可以用來解決內(nèi)部元素浮動，導(dǎo)致父級元素的高度坍塌問題。
3. BFC的觸發(fā)條件
- 根元素
-
flloat的值不是none -
position的值不是static或relative -
display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell -
overflow的值不是visible
4. BFC的應(yīng)用
- 清除浮動
根據(jù)BFC的渲染規(guī)則第6點（計算BFC容器的高度時，浮動元素也參與計算）來清除浮動，解決高度坍塌的問題。 - 解決上下margin邊距重疊問題
利用BFC渲染規(guī)則第2點（屬于同一個BFC的兩個相鄰塊級元素的margin會發(fā)生重疊），那么不屬于同一個BFC的兩個相鄰塊級元素的margin就不會發(fā)生重疊。 - 實現(xiàn)自適應(yīng)兩欄布局
<style>
.main{
background: red;
height:500px;
}
.sider {
float: left;
width: 20%;
height:300px;
background: blue;
}
</stley>
<body>
<div class="sider">我是側(cè)邊欄</div>
<div class="main">我是主體內(nèi)容</div>
<body>
image.png
首先我們根據(jù)規(guī)則1，要先把.sider div寫在.main div前面。這個.sider div才會浮動起來覆蓋在.main div上面。
再根據(jù)規(guī)則4（BFC的區(qū)域不會與浮動元素重疊），給.main加上overflow:auto;觸發(fā).main div生成BFC。
image.png
二、 IFC的概念和應(yīng)用
1、IFC的概念
IFC的全稱是Inline Formatting Contexts，也就是“內(nèi)聯(lián)格式化上下文”。
2、IFC的生成條件：
IFC的生成條件非常簡單，就是塊級元素內(nèi)僅包含內(nèi)聯(lián)元素。
需要注意的是當(dāng)IFC中有塊級元素插入時，會產(chǎn)生兩個匿名塊將父元素分割開來，產(chǎn)生兩個IFC。
3.IFC的渲染規(guī)則：
- 子元素水平方向橫向排列，并且垂直方向起點為元素頂部。
- 子元素只會計算橫向樣式空間，【padding、border、margin】，垂直方向樣式空間不會被計算，【padding、border、margin】。
- 在垂直方向上，子元素可以不同形式對齊（vertical-align）
- 能把在一行上的框都完全包含進(jìn)去的一個矩形區(qū)域，被稱為該行的行框（line box）。行框的寬度是由包含塊（containing box）和與其中的浮動元素來決定。
- IFC中的“l(fā)ine box”一般左右邊貼緊其包含塊，但float元素會優(yōu)先排列。
- IFC中的“l(fā)ine box”高度由 CSS 行高計算規(guī)則來確定，同個IFC下的多個line box高度可能會不同。
- 當(dāng) inline-level boxes的總寬度少于包含它們的line box時，其水平渲染規(guī)則由 text-align 屬性值來決定。
- 當(dāng)一個“inline box”超過父元素的寬度時，它會被分割成多個boxes，這些 boxes 分布在多個“l(fā)ine box”中。如果子元素未設(shè)置強制換行的情況下，“inline box”將不可被分割，將會溢出父元素。
4. IFC的應(yīng)用
- 水平居中，當(dāng)一個塊要在當(dāng)前環(huán)境水平居中，設(shè)置display:inline-block,會在外層生成一個IFC，通過設(shè)置text-align:center既可使其居中
- 垂直居中，創(chuàng)建一個IFC，用其中一個元素?fù)伍_高度，然后設(shè)置其vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中。
三、FFC的概念和應(yīng)用
1. FFC全稱是 Flex formatting contexts，彈性盒模型
2. FFC的生成條件
父級元素設(shè)置display:flex或者display:inline-flex
3. 渲染規(guī)則：
菜鳥教程詳解
ps: 生成FFC后，其子元素的float、clear和vertical-align屬性將失效。
