BFC--Something magical

BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

第一次听到这个词的时候，小生也是一脸的懵逼，脑子里瞬间想到的一个词是KFC，当然这里的BFC和肯德基一点关系都没有。言归正传，下面咱们谈论一下关于BFC的东西。

首先，BFC是如何形成的？

1、浮动元素，float 除 none 以外的值；

2、绝对定位元素，position（absolute，fixed）；

3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；

4、overflow 除了 visible 以外的值（hidden，auto，scroll）

只要满足以上条件之一，就会形成BFC。BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。相当于形成了一个独立的容器，和其他外部的元素不发生影响。

BFC可以用来解决那些问题？

1、margin重合问题，外边距折叠问题

正常文档流布局时，垂直方向上的两个相邻元素，设置margin时，会发生重合现象。可以在其中一个元素上加display：inline-block 解决。

2.包含浮动元素

通常情况下，父级元素的高度会被子元素撑开，但是当子元素浮动时，父元素不会被撑开。可以在父级元素上加over-flow：hidden 解决。