1 .BFC的含義 ：

Block Formatting Contexts（BFC） 塊級元素格式化上下文

它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關系和相互關系

塊級元素：父級（是一個塊元素）

內容：子元素（是一個塊元素）

其他元素：與內容同級別的兄弟元素

相互作用：BFC裏的元素與外面的元素不會發生影響

2.觸發條件 ：

觸發BFC的方式（一下任意一條就可以）

1.float的值不為none

2.overflow的值不為visible

3.display的值為table-cell、tabble-caption和inline-block之一

4.position的值不為static或則releative中的任何一個

3.FBC布局與普通文檔流布局區別

普通文檔流布局規則

1.浮動的元素是不會被父級計算高度

2.非浮動元素會覆蓋浮動元素的位置

3.margin會傳遞給父級

4.兩個相鄰元素上下margin會重疊

BFC布局規則

1.浮動的元素會被父級計算高度（父級觸發了BFC）

2.非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發了BFC）

3.margin不會傳遞給父級（父級觸發了BFC）

4.兩個相鄰元素上下margin會重疊（給其中一個元素增加一個父級，然後讓他的父級觸發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>

BFC布局規則及觸發條件