定義
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區(qū)域，只有Box-level參與，該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局，且與區(qū)域外部無關(guān)。
Box：CSS布局的對象和基本單位； Formatting Context：一塊渲染區(qū)域，并且有一套渲染規(guī)則
那些元素會形成BFC
- 根元素(body)(有誤？設(shè)置html：overflow:auto; body設(shè)置:overflow:auto;)
- float屬性不為none
- position為absoulte或者fixed
- display為inline-block，table-cell，table-caption，flex，inline-flex
- overflow不為visibile
BFC布局規(guī)則
- 內(nèi)部的Box會在垂直方向上，一個接一個放置
- Box垂直方向的距離由margin決定。屬于一個BFC的兩個相鄰Box的margin會疊加
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC區(qū)域不會與float box重疊
- BFC就是頁面上一個隔離的獨立容器，容器里的子元素不會影響到外面的元素。反之如此
- 計算BFC高度時，浮動元素也要參與計算。
BFC作用
對于以上的規(guī)則，我們通過例子進行剖析，總結(jié)BFC的作用：
-
自適應(yīng)兩列布局
``` <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; /*overflow: hidden;*/ } </style> <body> <div class="aside">aside</div> <div class="main">main</div> </body> ```效果圖為：
bfc-1參考第3條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。可知main的左邊框和父元素的border接觸。
而依據(jù)第4條規(guī)定:
BFC區(qū)域不會與float box重疊我們觸發(fā)main的bfc，給其設(shè)置 overflow: hidden；可以得到如下的效果：從而實現(xiàn)了兩列布局。
bfc-2 -
清除內(nèi)部浮動
<style> .par { border: 1px solid #fcc; width: 100px; /*overflow: auto*/ } .child { border: 1px solid #f66; width:30px; height: 30px; float: left; }
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
```
bfc-3
參考第6條：
計算BFC高度時，浮動元素也要參與計算。
可知，父元素觸發(fā)了bfc后，在計算父元素高度時會把浮動的子元素也計算在內(nèi)，從而達到清除浮動的作用：
- 防止垂直的margin重疊
<style>
p {
color: #f55;
background: #fcc;
width: 100px;
line-height: 20px;
text-align:center;
margin: 20px;
}
</style>
<body style="border: 1px solid #aaa; width: 140px;">
<p>Haha</p>
<p>Hehe</p>
</body>
效果為：
bfc-5
可知兩個相鄰的元素，其margin發(fā)生的和重疊，兩者之間的距離為20px。
依據(jù)第2條：
Box垂直方向的距離由margin決定。屬于一個BFC的兩個相鄰Box的margin會疊加
把第二個元素進行包裹，可以得到兩者之間的margin擴大為兩個元素margin之和：
<style>
p {
color: #f55;
background: #fcc;
width: 100px;
line-height: 20px;
text-align:center;
margin: 20px;
}
.wrap{overflow: hidden;}
</style>
<body style="border: 1px solid #aaa; width: 140px;">
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
效果為：
bfc-6
總結(jié)
上述的幾個例子，都符合第5條規(guī)則：
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
因為BFC內(nèi)部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內(nèi)部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理
