什么是 BFC？有哪些特点

BFC是块级格式化上下文（Block Formatting Context）的简称，是Web页面中常见的一种CSS布局概念。一个 BFC 是页面上一个独立的块级渲染区域，只有Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC 具有以下特性：

内部的 Box 会在垂直方向上一个接一个地放置。
Box 垂直方向的距离由 margin 决定：属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。
BFC 的区域不会与 float box 重叠。
BFC 在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之亦然。
计算 BFC 的高度时，浮动元素也参与计算。
创建 BFC 的方法有很多，其中常见的有以下几种：

float 属性：给元素设置浮动属性可以让其成为 BFC。
position 属性：将元素的 position 属性设为 absolute 或 fixed，可以让其成为 BFC。
display 属性：将元素的 display 属性设为 inline-block、table-cell、table-caption，可以让其成为 BFC。

overflow 属性：给元素设置 overflow 属性（visible 除外）也能让其成为 BFC。
BFC 实际上是一种对元素进行隔离（Isolation）处理的机制，能够有效地解决很多常见的布局问题。例如，当一个包含浮动元素的容器无法自适应高度时，将该容器设为 BFC 可以让其正确地包含浮动元素，达到正确的布局效果。