什么是BFC？开启后会解决什么问题？如何开启？

 一、什么是BFC？

MDN解释如下：区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

通俗解释：区块格式化上下文，相当于元素的隐藏属性or特异功能

二、BFC能解决什么问题

1、盒子外边距塌陷问题，也就是盒子最上面的子元素设置的margin-top以及最下面子元素设置的margin-bottom会作用在父元素身上，那么如果父元素开启bfc就不会出现这种问题

2.元素浮动后脱离标准流，兄弟元素被遮挡的问题

3、所有子元素浮动后，父元素高度塌陷问题

三、什么元素默认开启了BFC（常见）

根元素 浮动元素  行内块 绝对定位or固定定位 表格 伸缩项目(flex布局)  

四、补充

尽管BFC可以解决上述问题，但是遇到这些问题时还是推荐使用最常用的那些方式

解决盒子外边距塌陷：

1、给父元素设置padding 或 border

2、overflow:hidden

清除浮动不利影响：

1、给父元素浮动（不推荐 会影响父元素兄弟元素排列）

2、给父元素设置高度

3、overflow:hidden

4、在浮动元素后添加空块元素 设置clear:both

5、给父元素添加伪元素::after，设置content:'',display:blpock ,clear:both

ps:以上为个人总结，有什么没说清楚的地方欢迎评论