BFC

BFC（Block  formatting  context）块级格式化上下文，是一个独立的渲染区域。

一、如何触发BFC：

1、根元素（html）;

2、设置float除none意外的值（left  ,right）;

3、设置overflow 除visible 以外的值（hidden,auto,sroll）；

4、设置display （table-cell,inline-block,flex）;

5、设置position(absolute,fixed)

二、BFC的布局规则：

1、内部的BOX会在垂直方向，一个接一个的放置；

2、BOX垂直方向的距离由margin决定。同一个BFC的两个相邻 BOX的margin会重叠；

3、每个元素的margin box （子元素）的左边，与包含块border box（父元素）的左边相接触；

4、BFC是页面上的一个隔离的独立容器，里面的子元素不影响外面；

5、计算BFC的高度时，浮动元素也会参与计算；

6、BFC的区域不与float box(浮动的盒子)重叠。

三、BFC的作用：

1、可以解决上下margin重叠问题，给添加margin值的元素再套一个盒子，并设置overflow：hidden；

2、可以解决高度塌陷问题，子元素浮动脱离了正常的文档流，也脱离了父元素盒子，此时父元素盒子高度为0，给父元素设置overflow:hidden，触发了BFC，闭合浮动；

3、可以实现多栏布局，两个浮动的元素相邻，剩下一个元素设置overflow:hidden ，触发BFC。