在什么情况下采用BFC

介绍BFC的博文有很多，下面，我就从另一个角度解释一下“在什么情况下会使用BFC”

以下仅代表我的个人看法，如果有错误的地方，还希望大家能告诉我，以免我在错误的道路上越走越远。

一、BFC是什么

Block Formatting Context 块元素 格式 上下文，他是一种特定触发条件下的规则。Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

   规则如下：

float的值不为none。

       overflow的值不为visible。

       display的值为table-cell, table-caption, inline-block中的任何一个。

       position的值不为relative和static。

 

二、什么情况下用BFC

   观察BFC的几种触发方式。我们可以看出：这几种触发条件，表面上都是一些自身属性的设置，但是这几个属性都会带来“副作用”(比如:改变文档的流式布局；块级元素的自适应性；)简单的说：就是这几个副作用就是--后效性，  

   我们为了屏蔽这种副作用，就要触发BFC，通过BFC将副作用的影响范围控制住 。当我们为了局部效果将子元素和父元素中的一个使用了上面的触发条件。必然会引起属性效果的“向后非期望蔓延”BFC就是针对这几个属性的补救措施。但是之所以没有默认触发，可能是考虑到副作用可能是期望的效果，即选择的权利交给了开发人员。因此上我们是为了BFC效果，才触发了条件。而实际上是因为局部使用了有后效性的属性，我们才用BFC的规则将布局回归到正常。 以我的理解BFC可以翻译为“盒模型布局异常修正系统”。

转载于:https://www.cnblogs.com/webARM/p/3780833.html