谈谈BFC

一、什么是BFC？

   官方的文档说法：块级格式的上下文，也就是说他是一个独立的区域，不和其他的元素有任何的联系。不受其他元素的影响，也不会去影响其他的元素。

二、什么情况下会引起BFC？

（1）float设置为left或者right时

（2）position为absolute和fix时

（3）display为inline-block时或者table-cell, table-caption, flex, inline-flex ）

（4）overflow  不为visible时

三、BFC 会引起什么效果

（1）清除浮动

a、下图是没有清除浮动的时候，父级设置高度，由于设置了浮动 ，父级的高度坍塌。

b、下图是设置了给父级设置了BFC之后的效果，从中可以看到，当父级的元素被设置为BFC时，父级的元素的高度被撑开，达到清除浮动的效果。

总结：BFC的内部和外部的元素不会相互影响，当内部的元素设置浮动之后，为了不影响其他的元素，BFC在计算高度的时候也会包括浮动的高度，所以有清除浮动的效果。

（2）自适应两栏的布局

a、从图中可以看到受到浮动元素的影响。两部分有重合的部分。

b、从图中可以看到当设置BFC之后，两者之间并没有进行相互的干扰。

总结：　当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄，从而实现了两栏的自适应的布局。

（3）有效的防止margin垂直方向重叠

a、如下图所示，在通常情况下，由于margin的独特性，在垂直方向margin可能会发生重叠。

b、当设置了BFC之后，就能后有效的防止垂直方向进行重叠,最后的一个元素由于设置了BFC能够有效的进行防止垂直方向的重合。

总结：由于设置了BFC的，可以看到其他的元素不会被影响到，垂直方向的margin的重合便不会发生。