CSS中的BFC

首先要理解什么是BFC？

Block Fromatting Context(块级格式化上下文)----简称BFC。

在我们学习CSS途中会理解到BFC这么一个概念，很多小伙伴不太了解是个什么东西，也不理解它的作使用。接下来我给大家讲讲它有什么使用。

首先我们来说说CSS中的两个经典bug----margin塌陷和margin合并。

我们来看一段代码

一个父子级的两个div，而后我给父级加top值50px，子级同样50px，大家理想的效果一定是下图这样

但是事实呢？并不是...结果是这样的

子级div的margin-top值为什么没有生效呢？这是为什么呢？这就是两个bug中的之一----margin塌陷

为什么叫塌陷呢？

大家可以这样去了解，就好比原本子级的margin值是相对于父级的边框去移动的，子级左右下三个方向的margin值都好使，就top（上）方向的不好使，就好比上边框塌陷了一样，由于你没有参照物。所以子级的margin-top值不生效。相信小伙伴已经迫不及待的想知道怎样去处理这个bug，稍安勿躁。咱们再来看看什么叫margin合并...

刚刚我们已经知道子级的margin-top值没有生效，但是假如我子级的margin-top值大于父级自身的margin-top值呢？下面继续上代码!

我给了子级div的margin-top为100px（一定大于父级50px啊），下面看看运行效果

发现子级的margin-top值竟然生效了，而且还带着父级一起往下移动了100像素，这种现象就叫margin合并。

总结一下：当子级的margin-top值小于父级的margin-top值，子级top值不生效，

当子级的margi-top值大于父级的margin-top值的时候，会带着父级一起动。

那这两个现象我们要怎样去处理呢？接下来我们要讲的BFC。

我们知道浏览器解析CSS代码会有一套渲染解析的语法，而后挨条去解析而后执行css代码，而我们所说的BFC它就能改变浏览器解析CSS的语法，恰好BFC就能处理我们上面所说的两个现象，既然说能改变，那我们怎样去触发这个BFC让它去改变呢？

下面列举几个最常使用的方法：

给父级加上下面任意一个属性

1. position: absolute / fixed;
2. overflow: hidden;
3. display: inline-block;
4. float: left / right;

那这么多属性，我们使用哪一个呢？这个一定是似情况而定的。如果我父级不想定位，你不可能去给它加一个position: absolute；这一定就会影响布局，方法任选其一。小编自己使用的最多也就是overflow: hidden;

那我们给上面代码加一个试试？

这样就处理了margin塌陷和margin合并的问题，即可以达到我们想要的效果了。