到底什么是bfc？ 1、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

3、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发： (1) 给元素添加浮动，浮动元素就具有BFC特性---- float: left/right;

(2) 给元素添加overflow属性---- overflow: hidden，auto，scroll(除了visible);

(3) 给元素添加display属性---- display: inline-block, flex, inline-flex, table-cell，table-caption;

(4) 给元素添加定位---- position: absolute，fixed

4、bfc特性 (1)内部的Box会在垂直方向，从顶部开始一个接一个地放置 (2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，与方向无关 (3)每个元素的margin box的左边，与包含块border box的左边相接触，即使在浮动元素中也是这样 (4)BFC的区域不会与float box叠加，利用此特性可以实现两列布局，左边固定宽度，右边自适应 (5)BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，里面的子元素也不会影响到外面的元素 (6)计算BFC的高度时，浮动元素也会参与计算

5、bfc可以解决的问题： (1) 外边距塌陷的问题： 首先理解何为外边距塌陷？ 第一种是父子元素之间的外边距塌陷 第二种是兄弟元素之间的外边距重叠

总结

一个BFC区域只包含其子元素，不包括其子元素的子元素。

并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。