版权声明：转载原创文章请注明：文章转载自：前端精髓 https://blog.csdn.net/wu_xianqiang/article/details/79242305
BFC是块级格式化上下文
产生EFC有以下几种情况：
- float值不为none
- overflow值不为visible
- position值不为relative和static
强调内容
BFC有什么作用？
BFC提供一个环境，HTML元素在在这个环境中按照一定的规则布局。两个BFC之间互不影响，BFC容器不会受里面元素的影响。
使用BFC来解决margin问题
在父子元素中，子元素设置了margin，父元素会跟着子元素偏移，我设置的是绿色盒子的margin值，但是绿色盒子并没有距离红色隔开
我们可以在红色盒子设置加样式为overflow: hidden; 来解决这个问题，当然你也可以设置float: left; 或者 position: absolute; 让红色盒子形成一个BFC环境来解决这个问题。
还有在两个垂直方法排列的盒子也会有margin问题，两个盒子我设置了上下都20px，但是实现的最终效果是两个盒子只有20px，原本上下距离20px应该之间就会有40px的间距。
我们可以通过绿色盒子再套一个标签设置overflow: hidden 来解决，目的就是形成一个BFC环境，使两个元素不会相互干扰，当然你也可以使用其他样式来形成一个BFC环境都可以解决的。