1 .BFC的含義 ：
Block Formatting Contexts（BFC） 塊級(jí)元素格式化上下文
它決定了塊級(jí)元素如何對(duì)它的內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互關(guān)系
塊級(jí)元素：父級(jí)（是一個(gè)塊元素）
內(nèi)容：子元素（是一個(gè)塊元素）
其他元素：與內(nèi)容同級(jí)別的兄弟元素
相互作用：BFC里的元素與外面的元素不會(huì)發(fā)生影響
2.觸發(fā)條件 ：
觸發(fā)BFC的方式（一下任意一條就可以）
1.float的值不為none
2.overflow的值不為visible
3.display的值為table-cell、tabble-caption和inline-block之一
4.position的值不為static或則releative中的任何一個(gè)
3.FBC布局與普通文檔流布局區(qū)別 ：
普通文檔流布局規(guī)則
1.浮動(dòng)的元素是不會(huì)被父級(jí)計(jì)算高度
2.非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置
3.margin會(huì)傳遞給父級(jí)
4.兩個(gè)相鄰元素上下margin會(huì)重疊
BFC布局規(guī)則
1.浮動(dòng)的元素會(huì)被父級(jí)計(jì)算高度（父級(jí)觸發(fā)了BFC）
2.非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素位置（非浮動(dòng)元素觸發(fā)了BFC）
3.margin不會(huì)傳遞給父級(jí)（父級(jí)觸發(fā)了BFC）
4.兩個(gè)相鄰元素上下margin會(huì)重疊（給其中一個(gè)元素增加一個(gè)父級(jí)，然后讓他的父級(jí)觸發(fā)BFC）
<divstyle="border:1px solid #f00;overflow:hidden; ">
<divstyle="width:100px; height:100px; background:green;float:left;">kaivon</div>
</div>
<divstyle="border:1px solid #f00;margin-top:100px; ">
<divstyle="width:100px; height:100px; background:green;float:left;">kaivon1</div>
<divstyle="width:100px; height:100px; background:red;overflow:hidden;">kaivon2</div>
</div>
<divstyle="background:blue;margin-top:100px;overflow:hidden;">
<divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div>
<divstyle="width:100px; height:100px; background:red;">kaivon2</div>
</div>
<divstyle="margin-top:100px; border:1px solid red;">
<divstyle="width:100px; height:100px; background:green; margin:100px0;">kaivon1</div>
<divstyle="overflow:hidden;">
<divstyle="width:100px; height:100px; background:red; margin:100px0;">kaivon2</div>
</div>
</div>
overflow 針對(duì)超出父級(jí)的內(nèi)容如何顯示
visible 默認(rèn)值，超出的內(nèi)容會(huì)顯示出來(lái)
auto 如果內(nèi)容超出了父級(jí)，那就出現(xiàn)滾動(dòng)條,如果內(nèi)容沒(méi)有超出，那就不出現(xiàn)滾動(dòng)條
hidden 超出的內(nèi)容給隱藏掉
scroll 不管內(nèi)容是否超出都出現(xiàn)滾動(dòng)條
