这是我参加「第四届青训营」笔记创作活动的第三天
BFC是我们无论面试还是写页面时候都经常会遇到的一个问题，只有彻底把他理解了，之后遇到了这种问题才会游刃有余。
1.首先我们需要搞清楚什么是BFC。
要搞清楚BFC，首先弄懂他的定义，BFC(Block Formatting Context)块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 独立的渲染区域，块级格式化上下文，听起来十分的晦涩难懂，但其实可以把它理解为页面中一个特殊的容器，一般为了几个特定作用而使用特定方法引入的。这个容器是独立的，容器内和容器外的布局是毫不相干。
2.BFC的几个特点
1.内部的box会在垂直方向，从顶部开始一个接一个地放置;
2.box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的box的垂直方向的margin会发生叠加;
3.在BFC中，每个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)。对于从右到左的格式来说，则触碰到右边缘，即使是浮动的也是如此，即不会发生margin穿透;
4.形成了BFC的区域不会与float box重叠;
5.计算BFC高度时，子浮动元素也参与计算(BFC会确切包含浮动的子元素，即闭合浮动);
3.常见的几种BFC的创建方法
1.浮动元素（float不是none）
2.绝对定位元素（position为absolute或fixed）
3.溢出隐藏元素（overflow值不为visible）
4.弹性元素（display为flex）
3.BFC的常见作用和具体实现方法。
1.清除浮动
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，想解决这个问题，就要让外面大盒子生成BFC，因为BFC的布局规则中，在计算BFC的高度时候，浮动元素也会参与计算。
所以我们给big盒子补充一个overflow：hidden属性，即可实现：
2.防止margin折叠
看这个例子
他的代码如下
可以看出上下两个盒子的外边距重叠到一起了，要想解决这种外边距margin重叠的问题，就可以让其中一个盒子外层包裹一层容器，并让该容器生成一个BFC，那么两个P就不在一个BFC中，就不会发生margin重叠。
可以这样改进。
但在实际应用中对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
3.自适应多栏布局
直接将两个盒子分别左右浮动，会实现如下状态，
但是我们想要右盒子不要占据左盒子的下方，分成两栏进行呈现，所以需要给右盒子触发BFC，变成单独的渲染区域。于是在右盒子.right里加上overflow：hidden就可以实现。
以上就是我对块级格式化上下文BFC的理解，希望能对读者们有一点点帮助.^^
