介绍BFC及其应用

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

触发条件：

• 根元素 html
• float 不为 none
• overflow 不为 visible
• display 值为 inline-block table-cell flex inline-flex
• position 值为 absolute fixed
• 弹性元素(flex布局)
• 网格元素(grid布局)

BFC 主要的作用是：

• 清除浮动
• 避免margin重叠