BFC定義
BFC（Block Formatting Context）格式化上下文，是Web頁(yè)面中盒模型布局的CSS渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域，或者說(shuō)是一個(gè)隔離的獨(dú)立容器。
BFC的形成條件
- 浮動(dòng)元素，float 除 none 以外的值；
- 定位元素，position（absolute，fixed）；
- display 為以下其中之一的值 inline-block，table-cell，table-caption；
- overflow 除了 visible 以外的值（hidden，auto，scroll）；
BFC的特性
- 內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置。
- 垂直方向上的距離由margin決定
- bfc的區(qū)域不會(huì)與float的元素區(qū)域重疊。
- 計(jì)算bfc的高度時(shí)，浮動(dòng)元素也參與計(jì)算
- bfc就是頁(yè)面上的一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響外面元素。
特性分析
1、BFC中的盒子對(duì)齊
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.container {
position: absolute; /* 創(chuàng)建一個(gè)BFC環(huán)境*/
height: auto;
background-color: #eee;
}
內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置。
2、外邊距折疊
在常規(guī)文檔流中，兩個(gè)兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個(gè)外邊距之和，而是以較大的為準(zhǔn)。那么怎么讓垂直外邊距不折疊呢？
bfc就是頁(yè)面上的一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響外面元素，同樣外面的元素不會(huì)影響到BFC內(nèi)的元素。所以就讓兄弟盒子中的任一個(gè)處于另一個(gè)BFC中就行了。
<div class="container">
<div class="wrapper">
<div class="box1"></div>
</div>
<div class="box2"></div>
</div>
.wrapper {
overflow: hidden; /* 創(chuàng)建一個(gè)BFC環(huán)境*/
}
3、不被浮動(dòng)元素覆蓋
浮動(dòng)的盒子會(huì)遮蓋下面的盒子，但是下面盒子里的文字是不會(huì)被遮蓋的，文字反而還會(huì)環(huán)繞浮動(dòng)的盒子。這也是一個(gè)比較有趣的特性?？梢杂肂FC來(lái)防止字體環(huán)繞。
.left {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
p {
background-color: green;
/* overflow: hidden; */
}
字體環(huán)繞.png
4、BFC 可以包含浮動(dòng)的元素（清除浮動(dòng)）
正常情況下，浮動(dòng)的元素會(huì)脫離普通文檔流，使父元素高度坍塌。即外層的div會(huì)無(wú)法包含內(nèi)部浮動(dòng)的div。
但如果我們觸發(fā)外部容器的BFC，根據(jù)BFC規(guī)范中的第4條：計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算，那么外部div容器就可以包裹著浮動(dòng)元素。
