对 BFC 的理解

什么是 BFC

首先要了解常见的定位方案，总共 3 种：

• 普通流

• 浮动

• 绝对定位

而BFC是属于普通流的，可以把BFC看作为页面的一块渲染区域，他有着自己的渲染规则

触发条件

触发BFC的条件包含不限于：

• 根元素，即HTML元素

• 浮动元素：float值为left、right

• overflow值不为visible，为auto、scroll、hidden

• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

• position的值为absolute或fixed

BFC 作用

防止margin(外边距)重叠

• 无BFC的情况，块的上外边距和下外边距合并为单个边距

  

• 有BFC的情况，边距则不会重叠

  

清除内部浮动

• 无BFC，添加了浮动，脱离了文档流

  

• 有BFC，清除浮动

  

阻止元素被浮动元素覆盖

• 无BFC，元素被浮动覆盖

  

• 有BFC，元素互不干扰