前端BFC的介绍和使用

一、什么是BFC？
BFC : 块级格式化上下文 （ 独立的渲染区 ）
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有块级元素参与， 它规定了BFC内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

bfc通俗的解释：块级元素布局逻辑（规则）

BFC的触发条件：
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

二、BFC有什么用？
1：放在margin上下重叠
2：解决高度塌陷
3：自适应两栏布局
“bfc区域不会与浮动的盒子相重叠”

三、BFC如何应用？
1.解决高度塌陷
注：当父元素没有设置高度，并且子元素块都向左浮动起来了，那么父元素就会塌陷
如图

利用bfc解决后