BFC模式

1、BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

BFC有一下特性：

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算。
7. 2、我们该怎么使用BFC呢，如何触发BFC呢？：
8. 1. float 除了none以外的值
   2. overflow 除了visible 以外的值（hidden，auto，scroll ）
   3. display (table-cell，table-caption，inline-block, flex, inline-flex)
   4. position值为（absolute，fixed）
   5. fieldset元素
   6. 在以上的情况里可以创建BFC。

   怎么运用BFC，在哪些场景可以用到BFC.

   1.解决margin叠加问题 三P每个p之间的距离为50px，发生了外边距叠加。 要解决这个叠加问题即让每个P之间是100px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。如下:

   2.用于布局

   从图中我们会发现上面BFC的第三个特性，就是元素的左外边距会触碰到包含块容器的做外边框，就算存在浮动也会如此。那么我们如何解决这个问题呢？看上面BFC第四个特性，就是BFC不会与浮动盒子叠加，那么我们是不是可以创建一个新的BFC来解决这个问题呢？来看看：

   发现我们用overflow:hidden触发main元素的BFC之后，效果立马出现了,一个两栏布局就这么妥妥的搞掂…

   3.用于清除浮动，计算BFC高度.

   因为上面第六个特性提到计算BFC高度时，浮动元素也会参与计算，我们先看一个例子：

   我们发现由于里面两个子元素浮动的关系，两个box已经脱离了父元素的包含块，父元素高度已经塌陷，我们需要让父元素包含两个box子元素，这样计算高度时，两个浮动子元素就会参与，所以我们要闭合浮动，触发父元素的BFC，我们还是继续用overflow:hidden来看看效果吧：

   怎么样，效果还很明显的吗，当然清理(闭合)浮动还有很多方法，大家可以看看一丝大神写的那些年我们一起清除过的浮动。 好了写到这里基本才不多了，BFC是个很奇怪的东西，她一直隐式的存在我们的css样式里，但是我们要记住BFC是页面元素里一个独立存在作用块，它不影响它外面的布局，外面的元素也不会影响到BFC里面的布局。