[高频面试题]BFC了解（什么是BFC，如何实现BFC，解决什么问题）

什么是BFC(Block Formatting Contenxts) : 块级格式上下文

BFC是一种CSS渲染模式

BFC不是一种技术，也不是一个框架，而是我们浏览器自带的一种渲染模式。（类似于flex伸缩盒子一样，BFC也是一种盒子模型，都是CSS自带的）.

如何使用BFC（四种方式开启BFC盒子）

• float不是none (有float属性且不为none,此时盒子自动变成BFC盒子)

• overflow属性不是visible(有overflow属性且不为visible,此时盒子自动变成BFC盒子)

• position属性不是static和relative

• display属性为以下值 ： table-cell 、 inline-block 、 table-caption

开启BFC 盒子变化

• 当一个块级盒子触发BFC之后，其内部形成独立环境，在里面做任何事都不会对盒子外部有影响。

• 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

BFC解决哪些问题

• 清除元素内部浮动

• 解决盒子margin合并问题（塌陷也可以解决）

• 实现元素宽度自适应多列布局

  • 制作右侧盒子自适应宽度的问题（左侧盒子宽度固定，右侧宽度不固定）

    • 当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。