BFC：Block Format Context
塊格式化上下文（Block Formatting Context狠毯，BFC） 是Web頁面的可視化CSS渲染的一部分额各，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域酒贬。
塊級(jí)格式化上下文
BFC是一個(gè)獨(dú)立的布局單元
即這個(gè)元素的布局不會(huì)影響到其它的元素（這個(gè)元素的內(nèi)容不會(huì)超到外面去又憨，不影響其它的元素）
想象：這個(gè)元素及其子元素在單獨(dú)的iframe里面/瀏覽器窗口去布局
這意味著BFC元素一定是方形的，其他元素進(jìn)不來锭吨，內(nèi)部元素也出不去
觸發(fā)BFC條件：
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section>
<div class="out">
<div class="in"></div>
</div>
</section>
</body>
</html>
body{
background-color:#777;
}
section{
width:300px;
height:100px;
background-color:#eee;
margin:50px;
xborder:2px solid balck;
xoverflow:auto;
xdisplay:inline-block;
}
.out{
width:200px;
height:100px;
background-color:#06F;
margin:50px;
xborder:2px solid red;
xoverflow:auto;
xfloat:left;
xdisplay:inline-block;
xposition:absolute;
}
.in {
width:100px;
height:100px;
background-color:#f60;
margin:20px 30px;
xborder:10px solid green;
xoverflow:auto;
xdisplay:inline-block;
xposition:absolute;
}
下列方式會(huì)創(chuàng)建塊格式化上下文：
- 根元素或包含根元素的元素
- 浮動(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或strict的元素 - 彈性元素（
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）壁榕。
創(chuàng)建了塊格式化上下文的元素中的所有內(nèi)容都會(huì)被包含到該BFC中矛紫。
