BFC

BFC 是什么？

BFC（Block Formatting Context，块级格式化上下文）可以理解为一个相对独立的块级布局环境。内部元素的布局通常不会直接影响外部，同样外部布局也不会轻易干扰内部。

形成 BFC 的条件

浮动元素 float 的值不为 none。
绝对定位或固定定位元素，例如 position: absolute、position: fixed。
overflow 不为 visible。
display 的特定值，如：
- inline-block
- flow-root
- flex / inline-flex
- grid / inline-grid
- table、table-cell、table-caption
根元素 <html> 本身就是一个 BFC。

BFC 有什么用？

避免父子元素之间的外边距合并。
包裹内部浮动元素，避免父元素高度塌陷。
阻止文字环绕浮动元素，形成独立布局区域。

css

.container {
  display: flow-root;
}

flow-root 是一种语义相对明确、现代且常用的 BFC 创建方式。

常见误区

position: relative 本身不会创建 BFC。
创建 BFC 不等于创建层叠上下文，它们是不同概念。
overflow: hidden 虽然常被用来创建 BFC，但也会带来裁剪副作用，不能无脑使用。