BFC常见的几种规则以及如何触发？

可能很多小伙伴工作很长时间还是没有搞明白前端中说的这个BFC到底是个什么鬼？它在网页中又是怎么呈现呢？这里简单跟大家来聊一聊BFC常见的几种规则显示，废话不多说，开搞！

首先我们肯定要普及下，到底什么是BFC？？？

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

其实说白了，它就是一个规则，没有那么的复杂，我们在网站布局的过程当中经常会遇到它，这里我罗列一下它所包含的一些布局的规则。

一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算

以上就是BFC它的一些规则，通俗点讲，就是我们在页面布局的过程当中，会遇到一些问题(bug)，如果我们遇到的问题是上面所见到的话就说明我们已经触发了BFC规则。

我们接下来慢慢的梳理下它的这几种规则。

首先，BFC(也叫块级格式化上下文)它是一个独立的空间，你可以理解为，你的卧室，单独的一个属于你自己的温馨的小窝(是不是有点困了！~~~)，在这个独立空间内它遵循一定的规则，它内部的盒子会自上而下的进行排列显示，如图所示：

那么在这样的一个显示状态下，我们就已经处在了BFC的规则当中，那么我们必然会触发它的一些规则，也就是规则二中所说到的，属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置），就如同这样，这个是最常见的一种形式。

很显然，给到第一个盒子和第二个盒子分别下边距和上边距各30px，但是最后显示的效果中间间距为30px，正常应该是显示60px，这里就是出现了重叠的现象，注意，出现这种情况下，哪个值给的大就显示哪个值，相同则不变，这其实在我们的日常布局当中会经常的遇到。

接下来我们再来看看BFC的另一种常见情况，上文它的规则中有提到过，“计算BFC的高度时，浮动元素也参与计算”，那么这个该如何理解呢？通俗的讲，就是在BFC的这个容器内，设置元素子元素为浮动元素的高度依旧参与高度计算，例如我们经常遇到的高度自适应，其实它就是BFC的一种常见形式。

例如上图所示，盒子内的两个带颜色的盒子都设置了浮动，正常不加任何设置的话他会出现高度塌陷的情况，如下所示：

可以明显的看到，带边框的盒子没有被里面的盒子所撑开，因为盒子内部两个元素都设置了浮动属性，他们脱离了文档流，那么要解决此种现象我们应该把它转换成BFC的形式，这样就可以遵循它里面“计算BFC的高度时，浮动元素也参与计算”的规则，可以设置overflow:hidden;或者给父元素一个高度，那么就可以解决这样的问题。

所以网页上我们见到的BFC不一定都是不好的，我们要进行转换思维的方式进行利用他，在遇到一些问题的时候能够知道是BFC的规则所引起的问题，我们就可以通过明白利用哪些方式去解决或者规避这些问题。

罗列下什么可以触发BFC？

根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

所以我们应该就知道，在网页的布局模块中，html这个区域内就是一个BFC空间，所以会时不时的触发BFC的规则。

最后附上BFC常用的一些应用

1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠