今天部门请前端工程师给后端工程师们做了一场主题为《带你了解H5——基础篇》。嗯，的确很基础，绝大多数都是我知道的，但是听到了一个完全不熟悉的词：BFC，听完培训有几个模糊的印象：
- 给元素设置了<code>overflow:hidden</code>，貌似就是BFC了
- BFC可以解决margin重叠的问题
- BFC可以解决浮动元素撑不开父级元素的问题
- BFC可以解决侧边栏问题
正好今天的任务除了需求外，没数据、没接口、没文档，实在无法展开工作，我就在网上搜了一些文章学习了一下。虽然别人已经写得很好了，但那是别人的，我还是想自己稍微整理一下，写篇记录，以加深自己对BFC的理解。
什么是BFC
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文(block formatting context)。
所以，BFC不是CSS样式，而是元素渲染的一种类型，共有四种类型：BFC、IFC、FFC、GFC，详见浏览器上下文渲染之 BFC、IFC、FFC、GFC
成为BFC的条件
- float的值不为none
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- position值为（absolute，fixed）不为static或者relative
- display的值为 table-cell, table-caption, inline-block,flex, 或者 inline-flex中的其中一个
- fieldset元素
BFC的特性
1.BFC内部，盒子由上至下按顺序进行排列，其间隙由盒子的外边距决定，并且，当<b>同一个BFC</b>中的两个盒子同时具有相对方向的外边距时，其外边距还会发生<b>叠加</b>(Margin Collapse)
2.BFC内部，无论是浮动盒子还是普通盒子，其左<b>总是</b>与包含块的左边相接触
3.BFC 区域<b>不会</b>与float box区域相叠加
4.BFC内外布局<b>不会</b>相互影响
5.计算BFC高度的时候，浮动元素的高度也计算<b>在内</b>
触发BFC
1.display: table 前后带有换行符，我们一般也不常用
需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。
2.overflow: scroll 可能会出现不想要的滚动条，丑
3.float: left 万一我们不想让元素浮动呢？
4.overflow: hidden比较完美的创建BFC的方案，副作用较小，仿佛遇到了我的心动女生
BFC能解决的问题
1.margin collapse(外边距叠加)
2.清除浮动
3.实现两栏布局
参考文章：
css中的BFC
overflow 与布局上下文（BFC）
那些年我们一起清除过的浮动
另外，今天的培训还学到一个词，叫Flex布局，其实早在2014年的时候吧就听说过了，一直没用过，一直也没有去学习一下，嗯，先记着，下次有时间一定要学习一下。
Flex 布局教程：语法篇
Flex 布局教程：实例篇
