对 BFC 的理解

BFC (Block Formatting Context) 是 CSS 中的一个概念，用于解决布局问题。它是一个独立的渲染区域，内部的元素不会影响外部的元素，外部元素也不会影响内部元素。

BFC 的特点有：

内部元素的布局不会影响外部元素的布局，反之亦然
内部元素的浮动会被 BFC 包含
BFC 能够清除内部元素的浮动
BFC 能够防止外部元素的 margin 合并
BFC 的创建条件有：

根元素（html）
float 属性不为 none
position 属性值为 absolute 或 fixed
display 属性值为 inline-block、table-cell、table-caption、flex、grid
overflow 属性值不为 visible
BFC 的应用场景：

解决浮动导致的布局问题
解决外边距合并问题
可以作为一个布局的容器，在其内部进行布局
总的来说，BFC 是 CSS 中一个非常重要的布局技巧，它能帮助开发者解决很多布局问题。