1. 什么是BFC
BFC：（block formatting context）蔬胯，塊格式化上下文忘衍。
平常基本不使用铺纽，純面向面試柬帕。
一個(gè)塊格式化上下文由以下之一創(chuàng)建：
- 浮動(dòng)元素 (元素的 float 不是 none)
- 絕對(duì)定位元素 (元素具有 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 且值不是默認(rèn) visible 的塊元素狡门，
- display: flow-root（最新屬性陷寝，可避免帶來(lái)其他的副作用）
BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海都不會(huì)影響外部的元素其馏。
2. BFC的實(shí)例（面試）
1. 爸爸管住兒子
用 BFC 包住浮動(dòng)元素凤跑。(這不是清除浮動(dòng)，.clearfix 才是清除浮動(dòng)）
.baba{
border: 10px solid red;
min-height: 10px;
display: flow-root; /*觸發(fā)BFC*/
}
.erzi{
background: green;
float:left;
width: 300px;
height: 100px;
}
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output
2. 同級(jí)兄弟劃清界限
用 float + div 做左定寬右自適應(yīng)布局
.gege{
width: 100px;
min-height: 200px;
border: 3px solid red;
float: left;
margin-right: 20px;
}
.didi{
min-height: 200px;
border: 5px solid green;
display: flow-root;
}
http://js.jirengu.com/kuhis/1/edit
