什么是BFC？

块格式化上下文（Block Formatting Context）是一个独立的渲染区域，简单来说就是一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部元素。

BFC规则

1. BFC内部的盒子Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的垂直margin会发生重叠。
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与浮动盒子float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算。

触发BFC

1. 根元素（html就是根元素，整个html就是一个独立的BFC）
2. float属性不为none（如：left | right）
3. overflow的值不为visible（如：hidden | auto | scroll）
4. display属性值为inline-block | flex | inline-flex | table-cell | table-caption
5. position为absolute或fixed

应用BFC

1. 解决margin塌陷问题
   也就是解决，在一个标准流body（body元素就是一个BFC）中相邻盒子之间垂直margin重叠的问题。
   方法：触发其中一个盒子的BFC，成为一个独立的容器，根据BFC规则，这个盒子的布局不受外部元素影响。
2. 解决高度塌陷问题
   当一个标准流中的盒子中所有的子元素都进行了浮动，并且没有给盒子设置高度时，那么这个盒子的整个高度就会塌陷，浮动的子元素高度不计算在父元素内，父元素高度就为0。
   方法：触发这个盒子生成BFC，根据规则计算BFC的高度时，浮动元素也参与计算。
   例如：1设置父元素浮动;2使用clearfix;3在浮动元素后加个div设置clear: both; height:0,overflow:hidden

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，同样的，外面的元素也不会影响到容器里面的子元素。