提出问题和假设
当我们谈论BFC时，可能会有以下问题产生：
- BFC是什么？有什么作用？
- 理解BFC对于我们到工作有哪些帮助？我们应该如何使用BFC？
- BFC里到Block指的是块级元素吗？那对应的内联元素有对应的特性吗？
除了上面三个问题，我还想到了其他问题，这些问题是在刚开始学前端时接触的：
- 使用浮动后，通常会清除浮动？清除浮动的知识是什么原理？
- 外边距重叠问题是什么原因，解决这个问题方案又是什么原理？
上面这两个问题与BFC有关吗？
收集数据
1、MDN文档
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
这篇文章为BFC下了一个定义：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
块级格式化上下文是一个区域，这个区域里的浮动定位、清除浮动、外边距折叠都发生在用一个BFC里。清除浮动，排除额外的浮动和防止外边距折叠，都可以利用新生成一个BFC来实现。
最简单使用BFC的方法，且不会产生副作用的是添加dispaly: flow-root属性。但是这个属性要现代浏览器才支持。
重温浮动以后，产生了一个问题，如何让浮动浮在文字中间呢，目前现成的属性只能浮动在左边或者右边。
2、10分钟理解BFC
https://zhuanlan.zhihu.com/p/25321647
这篇文件讲解了BFC的作用。清除外边距重叠，包裹浮动、清除被浮动遮挡的区域等。
这篇文章提供了一个有意思的类比，帮助我们加深对BFC的理解，BFC就像一个大箱子，把里面的元素包裹起来。里面的元素不会干扰外面的元素，同时，外面的元素也不能干扰箱子里的元素。
3、CSS深入理解流体特性和BFC特性下多栏自适应布局
https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
这篇文章主要讲解了利用BFC实现多栏布局，实际只说了两栏自适应布局。里面对比了实现BFC的CSS属性（因为文章比较老，估计flow-root还没出来）。最后选定了如下代码作为触发BFC的方案。
.cell {
display: table-cell; width: 9999px;
*display: inline-block; *width: auto;
}width设置那么大，是因为table-cell属性会被限制最大宽度不会超过容器的宽度。
4、Understanding CSS Layout And The Block Formatting Context
https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
这篇文章就是也讲到了BFC解决的三个问题，包裹浮动，双栏布局，避免边距折叠问题等。边距折叠问题只会发生在同一个BFC内，不同的BFC之间的边距不会发生折叠。
这篇文章提到了之前普通元素触发BFC的属性，多多少少都会带来副作用，副作用包括：对页面对影响+阅读代码对困惑。
5、Understanding Block Formatting Contexts in CSS
https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
这篇文章还是讲的BFC涉及的三点。但是给了详细的代码和图解。而且提到了多栏布局里（采用浮动），如何利用BFC解决最后一个元素掉落到第二行到问题。
放几张图，加深以下记忆
回答问题
回答之前提出的问题：
BFC是什么？有什么作用？
答：BFC就是把一个元素包括的区域独立了出来，独立出的区域有一些特性，最重要的就是里面的元素不会干扰外面的元素，外面的元素也无法干扰里面的元素。
BFC可以清除浮动，隔离浮动，解决外边距重叠问题。外边距重叠问题实际上是BFC的特性，两个独立的BFC外边距就不会重叠。
理解BFC对于我们到工作有哪些帮助？我们应该如何使用BFC？
答：BFC可以帮助清除浮动，解决外边距重叠。网上文章提的最多的是实现多栏自适应布局，比如我们实现两栏自适应布局。左边是一个浮动元素，右边是一个触发了BFC的元素，这样不管左边的浮动元素长度如何变化，右边的BFC元素会自动改变大小填满盒子（这里有一个小技巧是，这两个栏的边距要写到浮动元素上）。
代码例子如下：
.float-left { float: left; margin-right: 20px; } .bfc-content { overflow: hidden; background-color: #beceeb; }
BFC里到Block指的是块级元素吗？那对应的内联元素有对应的特性吗？
答：BFC可以不是块级元素，但是有块级属性。且display:inline-block属性也会触发BFC。
使用浮动后，通常会清除浮动？清除浮动的知识是什么原理？
答：清除浮动实际上就是让当前和后面的元素停止浮动。
外边距重叠问题是什么原因，解决这个问题方案又是什么原理？
答：第一个问题已经回答了这个问题。
结论
1、BFC知识里涉及到了浮动，自己对浮动的认识比较肤浅，还需学习。
2、在看触发BFC的条件里，有一个是：
contain值为layout、content或 paint 的元素
这个属性用于优化页面性能，下次得试一试。
3、多栏自适应布局方案得找时间总结总结。
4、自己的布局库可以考虑搞一搞。
5、虽然这些知识不会，但还是写了几年前端界面，并能解决工作中出现的问题，实际工作只需要知道一种方案就能做出来，但是如果追求卓越，就得持续学习，勇于探索。