BFC：block formatting context
MDN 對 BFC 的描述
一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現(xiàn)的區(qū)域欧募，也是浮動層元素進(jìn)行交互的區(qū)域压状。
一個塊格式化上下文由以下之一創(chuàng)建：
根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
- 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
- 具有overflow 且值不是 visible 的塊元素跟继，
- display: flow-root
- column-span: all 應(yīng)當(dāng)總是會創(chuàng)建一個新的格式化上下文种冬，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
一個塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容舔糖，除了被包含于創(chuàng)建新的塊級格式化上下文的后代元素內(nèi)的元素娱两。
塊格式化上下文對于定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素剩盒。浮動不會影響其它塊格式化上下文中元素的布局谷婆，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。
MDN給的定義比較抽象辽聊，下面按照定義一個一個試
1.浮動
<div class="baba">
<div class="erzi"></div>
</div>
<style>
.baba {
border:1px solid red;
min-height: 10px;
float: left;
}
.erzi {
height: 100px;
background: green;
float:left;
width:400px;
}
</style>
給父元素div float:left樣式以后纪挎，可以包住里面的內(nèi)容
2.絕對定位
<div class="baba">
<div class="erzi"></div>
</div>
<style>
.baba {
border:1px solid red;
min-height: 10px;
float: left;
}
.erzi {
height: 100px;
background: green;
position: absolute;
width:400px;
}
</style>
給父元素div position: absolute;樣式以后，可以包住里面的內(nèi)容
3.display不為block的block
<div class="baba">
<div class="erzi"></div>
</div>
<style>
.baba {
border:1px solid red;
min-height: 10px;
float: left;
}
.erzi {
height: 100px;
background: green;
display:inline-block;
width:400px;
}
</style>
給父元素div position: absolute;樣式以后跟匆，可以包住里面的內(nèi)容
4.overflow不為visible的塊盒
<div class="baba">
<div class="erzi"></div>
</div>
<style>
.baba {
border:1px solid red;
min-height: 10px;
overflow:hidden;
}
.erzi {
height: 100px;
background:green;
width:400px;
}
</style>
給父元素div overflow:hidden;樣式以后异袄，可以包住里面的內(nèi)容
5.新屬性display : flow-root
<div class="baba">
<div class="erzi"></div>
</div>
<style>
.baba {
border:1px solid red;
min-height: 10px;
display : flow-root
}
.erzi {
height: 100px;
background:green;
width:400px;
}
</style>
此屬性是css3新增屬性是讓當(dāng)前元素觸發(fā)BFC，專門用來包住子元素的玛臂，并且不會引發(fā)任何的bug烤蜕。
由上面的demo可知，只要滿足mdn列舉的創(chuàng)建方式迹冤，即可觸發(fā)BFC并包住子元素讽营。
父元素可以包住子元素，那BFC對兄弟元素之間有什么關(guān)系呢
給class為gege的float:left的BFC泡徙，在class為didi里加其他BFC
<div class="gege"></div>
<div class="didi"></div>
.gege{
width:100px;
min-height:600px;
float:left;
border:1px solid red;
}
.didi {
min-height:600px;
border:1px solid green;
width:100px;
/* 1. float:left; */
/* 2. position: absolute;
margin-left:100px; */
/* 3. display: inline-block; */
/* 4.overflow:auto; */
/* 5.display: flow-root; css新特性 */
}
每個注釋內(nèi)的BFC都可實現(xiàn)兩兄弟div分隔橱鹏，界限分明，使兩個div明顯的分隔開來堪藐。
css規(guī)范中有這么一句描述
在一個塊格式化上下文中莉兰，盒在豎直方向一個接一個地放置，從包含塊的頂部開始礁竞。兩個兄弟盒之間的豎直距離由'margin'屬性決定糖荒。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并
<div class="baba">
<div class="erzi1" ></div>
<div class="erzi2"></div>
</div>
.baba {
border: 1px solid red;
min-height:10px;
}
.erzi1 {
width:300px;
height: 100px;
background:green;
margin:10px;
border:1px solid red;
}
.erzi2 {
width:300px;
height: 100px;
background:green;
margin:20px;
border:1px solid red;
}
上面代碼可以看出兩個div的上下高度是由合兩者margin值較大的margin組成的。
說了這么多模捂，可以知道BFC的用途
1.BFC可以讓內(nèi)部的元素被包起來
2.BFC讓兩個相鄰的元素界限分明
參考文獻(xiàn)
1.https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
