來(lái)看看MDN給的文檔，BFC
塊格式化上下文（Block Formatting Context，BFC） 是Web頁(yè)面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。
通俗理解來(lái)說就是，給觸發(fā)BFC的元素一個(gè)邊界，把浮動(dòng)元素框起來(lái)。
下列方式會(huì)創(chuàng)建塊格式化上下文：
- 根元素(
<html>)- 浮動(dòng)元素（元素的
float不是none）- 絕對(duì)定位元素（元素的
position為absolute或fixed）
.* 行內(nèi)塊元素（元素的display為inline->block）- 表格單元格（元素的
display為table-cell，HTML表格單元格默認(rèn)為該值）- 表格標(biāo)題（元素的
display為table-caption，HTML表格標(biāo)題默認(rèn)為該值）- 匿名表格單元格元素（元素的
display為table、``table-row、table-row-group、``table-header-group、``table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認(rèn)屬性）或inline-table）overflow值不為visible的塊元素display值為[flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root)的元素contain值為layout、content或 paint 的元素- 彈性元素（
display為flex或inline-flex元素的直接子元素）- 網(wǎng)格元素（
display為grid或inline-grid元素的直接子元素）- 多列容器（元素的
column-count或column-width不為auto，包括 ``column-count為1）column-span為all的元素始終會(huì)創(chuàng)建一個(gè)新的BFC，即使該元素沒有包裹在一個(gè)多列容器中（標(biāo)準(zhǔn)變更，Chrome bug）。
舉個(gè)官方栗子
float
float的div脫離文檔流（啥是文檔流？），雖然是紫色的子級(jí)，但是浮動(dòng)在紫色邊框外。
但是如果給紫色div一個(gè)overflow:hidden，就會(huì)觸發(fā)BFC，邊界包裹float的div。
邊界包裹
外邊界塌陷
<div class="blue"></div>
<div class="red-inner">red inner</div>
.blue, .red-inner {
height: 50px;
margin: 10px 0;
}
兩個(gè)相鄰的外邊距合并，可以觸發(fā)BFC解決。
image.png
image.png
給下方的red-inner套一個(gè)父級(jí)BFC，即可
image.png
推薦使用官方文檔的display: flow-root來(lái)觸發(fā)BFC。
附贈(zèng)清除float的幾種方法
1.添加新的元素 、應(yīng)用 clear：both；
在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響.
注意：一般情況下不會(huì)使用這一種方式來(lái)清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽，造成結(jié)構(gòu)的混亂.
.clear{clear: both;}
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
<div class="clear"></div>
</div>
2.父級(jí)div定義非visible的overflow
上文說的很清楚了，不多贅述。
3.使用偽元素來(lái)清除浮動(dòng)
.clearfix:after{
content:"";/*設(shè)置內(nèi)容為空*/
height:0;/*高度為0*/
line-height:0;/*行高為0*/
display:block;/*將文本轉(zhuǎn)為塊級(jí)元素*/
visibility:hidden;/*將元素隱藏*/
clear:both;/*清除浮動(dòng)*/
}
4.使用雙偽元素清除浮動(dòng)
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
