前景：自己接触bfc是因为在清除浮动的时候，看博客讲到触发bfc也可以清除浮动，当时自己也是很懵逼，后来自己就去从头开始学，所以有了这篇总结
1.什么是BFC，官方解释：块级格式化上下文，是一个独立渲染的区域，只有块级盒子参加，它规定了内部的块级盒子如何布局，并且和外部的区域毫不相干，
2.那BFC有哪些特性，为什么会有清除浮动的功能
- 内部的盒子会在垂直方向上的一个接一个的放置
- box在垂直方向上的距离由margin决定，属于同一个BFC的相邻的盒子的margin会发生重叠
- 每个元素的margin-box左边与包含块的border-box左边相接触，即使是存在浮动也是如此
- bfc区域不会与外边的浮动盒子发生重叠，并且BFC包含内部float box的高度
bfc能够清除浮动恰好用的是第四点
3.那么什么条件能触发BFC呢？
- 根元素，在这个很好理解，就是整个html下就是一个BFC
- float和overflow不是默认值，也就是（none，visible),这个也很好理解，就是当它们不为默认值的时候，就会脱离文档流，自己去创建一个BFC
- position（定位），属性值为absolute和fixed，同理如上
- display为inline-block，flex...
思路启迪：有BFC,那对应的IFC你又知道吗？
