一、何為BFC
BFC（Block Formatting Context）格式化上下文，是Web頁面中盒模型布局的CSS渲染模式，指一個獨立的渲染區(qū)域或者說是一個隔離的獨立容器。

二、形成BFC的條件
1、浮動元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 為以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

三、BFC的特性
1.內(nèi)部的Box會在垂直方向上一個接一個的放置。
2.垂直方向上的距離由margin決定
3.bfc的區(qū)域不會與float的元素區(qū)域重疊。
4.計算bfc的高度時，浮動元素也參與計算
5.bfc就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素。

四 實例演示：

具體參考下面地址中的示例：
https://www.cnblogs.com/chen-cong/p/7862832.html

本文摘抄自https://www.cnblogs.com/chen-cong/p/7862832.html
作為學習筆記。