BFC是什么抖苦？
了解BFC之前毁菱，先了解Box，F(xiàn)ormatting Content的概念
-
Box：CSS布局的基本單位
Box是CSS布局的對象和基本單位锌历，可以理解為一個(gè)頁面就是有很多個(gè)Box組成的贮庞。元素的類型和display屬性決定了Box的類型；一個(gè)不同類型的Box究西，會(huì)參與不同F(xiàn)ormatting Content（一個(gè)決定如何渲染文檔的容器）窗慎，因此Box內(nèi)的元素會(huì)以不同方式進(jìn)行渲染，主要的Box有以下幾種：
- Block-level box：display屬性為block卤材、list-item遮斥、table的元素，會(huì)生成Block-level box扇丛。并且參與Block Formatting Content
- Inline-level box：display屬性為inline术吗、inline-block、inline-table的元素帆精，會(huì)生成Inline-level box较屿。并且會(huì)參數(shù)Inline Formatting Content
- Run-in box：css3才有
Formatting Content
是CSS2.1里面的一個(gè)概念隧魄。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則隘蝎，決定了其子元素如何定位以及與周圍元素之間的相互作用购啄。
常見的Formatting Content有Block Formatting Content（BFC）和Inline Formatting Content（IFC）
注意：CSS2.1中只有BFC和IFC，CSS3中增加了GFC和FFC.BFC定義
BFC直譯為塊級格式化上下文嘱么，它是一個(gè)獨(dú)立的渲染區(qū)域狮含，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局曼振，并且與外部毫不相干辉川。
注意：可以把BFC理解為一個(gè)大的盒子，其內(nèi)部是由Block-level box組成的BFC的規(guī)則
- BFC內(nèi)部的Box會(huì)在垂直方向拴测，一個(gè)接一個(gè)的設(shè)置；
- Box垂直方向的距離由margin決定府蛇，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin box的左邊會(huì)與包含塊border box的左邊相接觸（對于從左到右的格式化集索，否則相反），即使存在浮動(dòng)也會(huì)如此汇跨。
- BFC的區(qū)域不會(huì)與float box的重疊
- BFC就是頁面上的一個(gè)獨(dú)立容器务荆，容器里面的元素不會(huì)影響到外面的元素，反之亦然穷遂。（這一點(diǎn)很重要函匕，要牢牢記住）
- 計(jì)算BFC的高度時(shí)蚪黑，浮動(dòng)元素也參與計(jì)算盅惜。
BFC由什么條件創(chuàng)立?
- 根元素或其它包含它的元素
- float屬性不為none
- position屬性為absolute或fixed
- display屬性為inline-block、table-cell忌穿、table-caption抒寂、flex、inline-flex
- overflow屬性不為visible
BFC的用途
- 自適應(yīng)兩欄布局
<style >
body{
position: relative;
height: 400px;
}
.aside{
height: 200px;
width: 200px;
background-color: pink;
float: left;
}
.main{
background-color: grey;
height: 300px;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
效果：
根據(jù)BFC布局規(guī)則的第三條：
每個(gè)元素的margin box的左邊掠剑，與包含塊border box的左邊相接觸（對于從左到右的格式化屈芜，否則相反）。即使存在浮動(dòng)也是如此
因此朴译，即使存在浮動(dòng)的aside井佑，但是main還是與包含塊的左邊相接觸；
按照BFC布局的第四條規(guī)則：
BFC的區(qū)域不會(huì)與float box重疊
因此眠寿，可以通過使main觸發(fā)BFC躬翁，來實(shí)現(xiàn)自適應(yīng)兩列布局
.main{
overflow: hidden;
}
當(dāng)main觸發(fā)BFC后，其不會(huì)與浮動(dòng)的aside重疊盯拱。因此會(huì)根據(jù)包含塊的寬度和aside的寬度姆另，自動(dòng)變窄喇肋，效果如下：
-
清除內(nèi)部浮動(dòng)
當(dāng)子元素均浮動(dòng)時(shí)，其無法撐開父元素迹辐，這是可以讓父元素生成BFC蝶防，如下：
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
顯示：
根據(jù)BFC布局規(guī)則的第六條：
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
因此為了達(dá)到清除內(nèi)部浮動(dòng)明吩，可以讓.par觸發(fā)BFC间学，那么計(jì)算par的高度時(shí)，浮動(dòng)元素也參與計(jì)算印荔，par就被撐開了低葫；
代碼：
.par{
overflow: hidden;
}
顯示：
-
防止marin重疊
代碼：
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
頁面：
可以發(fā)現(xiàn)，兩個(gè)p元素之間的垂直margin出現(xiàn)了重疊仍律；
根據(jù)BFC的第二條規(guī)則：
Box垂直方向的距離由margin決定嘿悬，屬于同一BFC的兩個(gè)Box會(huì)發(fā)生margin重疊
因此，可以在其中一個(gè)p上包裹容器水泉，然后觸發(fā)其BFC善涨，這樣兩個(gè)p就不在同一個(gè)BFC，因此就不會(huì)發(fā)生重疊
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
效果如下：
總結(jié)
以上幾個(gè)例子都體現(xiàn)了BFC的第五條規(guī)則：
BFC就是頁面上一個(gè)隔離的獨(dú)立容器草则，容器內(nèi)的子元素不會(huì)影響外部的元素钢拧，反之亦然。
因?yàn)锽FC內(nèi)部的元素不會(huì)影響外部的元素炕横，因此當(dāng)BFC外部有浮動(dòng)元素時(shí)源内，BFC為了不影響內(nèi)部Box的布局，BFC會(huì)通過變窄份殿，避免與浮動(dòng)元素重疊膜钓；同樣的，當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)卿嘲，為了不影響外部元素的布局呻此，BFC計(jì)算高度時(shí)會(huì)包括浮動(dòng)元素的高度。避免margin重疊也是如此
轉(zhuǎn)自：前端精選文摘：BFC 神奇背后的原理
