BFC 即为Block formatting context 的缩写，BFC 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。

1、哪些元素能产生BFC

不是所有的元素都能产生BFC的，只有display 属性为 block, list-item, table 的元素，才可以产生BFC。

这点其实根据BFC的主要作用应该可以很形象的理解。“必须表现为一块一块的，才能给出一个隔离的空间“。

2、触发BFC的具体条件

光有BFC的潜质，不代表就直接会触发BFC。触发BFC 需要至少满足下列条件中的一条：

（1）、具有浮动（即float不为none）
（2）、具有绝对定位或固定定位（position：absolute |fixed）
（3）、display为inline-block, table-cell, table-caption, flex, inline-flex
（4）、overflow不为visible（一般设置overflow：hidden）

3、BFC盒子的特性

（1）、BFC内部的盒子是从上到下一个接着一个排列的（正常的块级元素排列也是如此）
（2）、BFC内部的盒子之间的距离是通过margin值来设置的，相邻的两个盒子的margin会重叠
（3）、BFC盒子内部的子盒子是紧贴着BFC盒子的边缘的（从左到右排列，则子盒子的左边缘紧贴着BFC的左边框（不与边框重叠）；从右到左排列，则子盒子的右边缘紧贴着BFC盒子的右边框）
（4）、BFC盒子不会与浮动的盒子产生重叠，而是紧靠着浮动的边缘
（5）、计算BFC的高度时，也会自动计算浮动或定位的盒子的高度

4、BFC的具体应用

（1）、清除元素内部的浮动（特性（5）的应用）

正常情况下当父盒子不给出高度时，子盒子的高度会将把父盒子自动撑开来，让父盒子具有高度。

而如果子元素都具有浮动时，父盒子就不会被撑开。这时使父盒子具有BFC属性即可同时计算浮动盒子的高度

（2）、解决外边距合并的问题（特性（2）的应用）
（3）、使右侧盒子宽度自适应（特性（4）的应用）

一个父盒子内部有两个子盒子，如果第一个子盒子有浮动，而第二个子盒子没有浮动，则第一个子盒子会盖在第二个盒子上面。

如果给第二个子盒子（.son2{overflow:hidden}）添加BFC，则第二个盒子会紧贴着浮动盒子的右侧，并且由于第二个子盒子没有宽度，所以他的宽度会自适应剩余大小。

最后，一般设置BFC最常用的就是给盒子加上 overflow: hidden; 因为这样的写法基本上不会对原有的其他样式产生影响。