BFC

是什么？

BFC（Block Formatting Context，块级格式化上下文） 是 CSS 中的一种布局机制，它决定了元素如何定位其内容、如何与其他元素的布局和浮动元素进行交互。

特点

BFC 是一个独立的渲染区域，它内部的子元素不会影响外部元素的布局，反之亦然。BFC 为这些内部元素创建了一个局部的环境，在这个环境中，它们按照特定的布局规则排列。

触发条件

• float 的值不为 none（即 float: left 或 float: right）。

• position 的值为 absolute 或 fixed。

• display 的值为 inline-block、table-cell、table-caption、flex 或 inline-flex。

• overflow 的值为 hidden、auto、scroll 或 overlay。

• contain: layout 属性被使用。

布局规则

• BFC 的内部元素在垂直方向上排列：BFC 内部的块级元素会一个接一个地垂直排列，且每个元素的顶部紧贴前一个元素的底部（外边距会产生影响）。

• BFC 不会与浮动元素重叠：BFC 容器会包裹浮动的子元素，并且不会发生与浮动元素的重叠。BFC 元素的外边界会从包含的浮动元素的边界开始。

• BFC 内部的元素不会与外部的浮动元素重叠：BFC 可以用于解决浮动元素造成的布局问题，因为 BFC 元素不会与浮动元素发生重叠。

• 计算高度时，BFC 会包含浮动的子元素：当父元素形成了 BFC，且其中包含浮动元素时，父元素会扩展高度以包含这些浮动元素。这是解决浮动高度塌陷问题的一种方法。

• BFC 的外边距不会与外部元素的外边距重叠：在正常的文档流中，两个相邻的块级元素的垂直外边距会发生合并（外边距重叠）。如果其中一个元素形成了 BFC，外边距合并将不会发生。

应用场景

• 清除浮动（解决高度塌陷问题） 当一个父元素包含浮动的子元素时，父元素可能会因为没有包含浮动元素的高度而出现高度塌陷。通过让父元素形成 BFC，可以强制其包含浮动的子元素。

• 防止外边距重叠 在正常文档流中，两个相邻块级元素的垂直外边距会发生合并。通过让其中一个元素形成 BFC，可以避免这种外边距重叠的情况。

• 自适应布局（避免浮动元素覆盖） 当一个浮动元素与另一个非浮动元素并排时，可能会出现重叠。通过将非浮动元素变成 BFC，可以避免这种重叠。

• 布局中的多栏布局 使用 BFC 可以实现复杂的多栏布局。例如，通过使用 float 和 overflow，可以实现左侧栏和右侧栏浮动，中间内容自适应的布局。