一、 BFC的概念
BFC——block formating context的缩写，中文译为"块级格式化上下文"
二、如何触发BFC
1.设置float除none以外的值(left,right)
2.设置overflow除visible以外的值(hidden,auto,scroll)
3.设置display属性(table,table-cell,inline-block,flex)
4.设置position属性(fixed,absolute)
三、BFC的作用
1.可以解决上下margin重叠问题
可以给其中一个元素在外层嵌套一个父容器，并设置overflow:hidden;这样为里面的元素创建了一个块级格式化上下文
2.可以解决高度塌陷问题
父元素高度自适应，子元素浮动脱离文档流，不占据父元素空间，导致父元素高度为0，此时给父元素设置overflow:hidden,闭合浮动，触发了BFC
3.可以实现多栏布局
两个浮动元素相邻，另外一个元素设置overflow:hidden;触发了BFC
来源：oschina
链接：https://my.oschina.net/u/4335122/blog/4202835