BFC 规则

 BFC：（block formatting context）中文直译:块级格式化上下文；

BFC定义是页面中css渲染的一部分。主要用于“决定”盒子的布局以及浮动（相互影响范围）的一块区域。

在进行盒子元素布局的时候， BFC 提供了一个环境， 在这个环境中按照一定规则进

行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子元素

的主要受该浮动元素影响，两个浮动元素之间是互不影响的。

也就是说，如果一个元素符合了成为 BFC 的条件，该元素内部元素的布局和定位

就和外部元素互不影响(除非内部的盒子建立了新的  BFC)， 是一个隔离了的独立容器。

 

那么如何产生（触发）BFC 规则：

 1）根源素

 2)  float 的值不为 none；

 3)  overflow 的值不为 visible；

 4)  display 的值为  table-cell、table-caption 和 inline-block 之一；

 5)  position 的值不为  absolute  或  fixed 中的任何一个；

触发BFC后，BFC的布局规则：

 

 1）内部的块级元素在垂直方向上一个接一个的放置；

 2）块级元素垂直方向margin重叠，取最大值，（在同一个BFC中的两个相邻元素）

 3）每个元素的margin box的左边与包含块的border box左边接触。（即使浮动也是如此）

 4）BFC区域不会与float重叠。

 5）BFC是一个独立的区域（容器），容器内的子元素不会影响外面的元素。

 6）计算BFC高度时。浮动元素也要参加。

 7）只应用于BFC的子级元素。对产生BFC的元素不适用。