前言
BFC（Block Formatting Context）
块级格式化上下文，中文名比较拗口，记住和Block布局有关就可以了。
概念之类的不必多说，反正没人关心，讲一讲如何触发BFC，BFC会遇到哪些场景即可。
触发BFC
- 设置overflow，使overflow不为visible（默认），最常用。
- flex等display属性（基本就是除了默认的block）
- float不为none
事实上除了第一条overflow，我们都不会刻意设置一些属性来触发bfc。
flex和grid我们经常用，float也非常熟悉。position更是没什么问题。
不常用的触发方式
- position为absolute或者fixed。
- contain为layout、content或paint的元素。
- 多列容器（元素的column-count或column-width不为auto，包括column-count为1）
- html标签（根元素）
场景/BFC的作用
解决margin父子折叠问题（最重要的）
margin折叠问题，简单来说，举个例子。
上面的元素使用margin-bottom设置下边距，比如25px;下面的元素使用margin-top设置上边距，比如15px。按照我们的想法，二者上下之间有40px的距离，然而，margin会重叠在一起，因此，他们之间的距离只有25px这个较大值。
相邻元素折叠还算好理解的。实际上父子元素之间也存在折叠问题，内部子元素的margin，反而看上去变成了父元素的margin。这显然不符合我们思考的逻辑，因此要避免这种情况。
我们通过将父盒子变成BFC元素，从而解决margin折叠问题。
<div class="container bfc">
<div class="inner"></div>
</div>
这种问题只在block中存在，因为flex和grid已经是bfc元素了，不需要解决这种问题。
之所以还能提一嘴bfc，是因为有些页面依然存在大量的block布局，比如某些博客园主题。block布局是避不开的，因此至少，遇到问题的时候，应该知道是哪里出了问题。
避免被浮动盒子覆盖
有趣的是，float元素也触发了BFC，所以他和float的表现是接近的。
使得浮动子元素能够撑开父盒子
把bfc类去掉，就能看到一片空白
扩展
margin兄弟元素折叠
兄弟元素发生的折叠，一般情况下，我们应该避免兄弟元素之间在同一个方向上设置margin。
如果要解决，应该使用float元素然后中间加个清除浮动（不然就同一行了）。
博客园里面有这种写法，每个元素都float: left，然后清除浮动，使得这些元素处于同一列。
下面是使用bfc来解决这个问题的方法，还是需要添加一个无意义的标签。
由于这些方法会多一些不必要的标签（主要是写起来更烦了），因此应该避免margin重叠的写法，而不是使用浮动去解决。
实在要写，就去grid或者flex中写，这些容器里面不存在margin折叠的问题。
