BFC是什么

什么是BFC

BFC：块级格式化上下文（Block Formatting Context），是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者是一个独立的容器；可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC特性

1. 内部的盒子（Box）会在垂直方向上一个接一个的放置；
2. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
3. 每个盒子的左边，与包含块的左边相接触（从右往左的格式，右边缘接触）。即使存在浮动也是如此，除非产生了新的BFC；
4. BFC的区域不会与float box重叠；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
6. 计算BFC的高度时，浮动元素也参与计算。

触发BFC的方式

• float不为none
• position：absolute、fixed
• overflow部位visible
• display：table-cell、inline-block

所解决的问题

1. 父子组件margin重叠（给父元素属性形成BFC即可）
2. 相邻元素垂直外边距问题（给其中一个元素包裹父元素触发BFC）
3. 高度坍塌