对BFC的理解

BFC

概念：

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

如何触发BFC：

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

BFC的作用：

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