BFC

概念：

中文名为“块级格式化上下文”，它是block formatting context的缩写。 它是一个独立的渲染区域，（Block-level box）规定内部的Block-level Box如何布局，并且与外部没有任何关系。

如何触发BFC：

设置float除none以外的值；设置display（如inline-block，flex，table-cell）；设置overflow除visible以外的值（hidden，scroll，auto）；设置position（如absolute，fixed）；

BFC的作用：

解决上下margin重叠问题 给设置margin的元素再嵌套一个盒子，并设置overflow：hidden；此时，为里面设置margin的元素创建了一个块级格式化上下文解决高度塌陷问题 子元素浮动脱离文档流，导致父元素高度为0；此时，给父元素添加overflow：hidden触发了，给浮动的子元素创建了块级格式化上下文，闭合了浮动实现多栏布局 用于布局与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种