BFC 及其应用

块级格式化上下文（Block formatting context，BFC）是页面中一块独立的渲染区域，只有 block-level box 参与，规定了其子元素如何布局。

BFC 布局规则

• 内部的 Box 会在垂直方向，一个接一个地放置。
• Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
• 每个元素的 margin box 的左边， 与包含块 border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
• BFC 的区域不会与 float box 重叠。
• 计算 BFC 的高度时，浮动元素也参与计算。
• 前面两点其实这样理解：BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

如何创建 BFC

常见方式：

• html 根元素
• float 属性不为 none
• position 为 absolute 或 fixed
• display 为 inline-block、table-cell、table-caption、flex、inline-flex
• overflow 不为 visible

BFC 的作用

• 消除外部浮动影响
• 清除内部浮动
• 防止垂直 margin 重叠

参考链接

• Understanding Block Formatting Contexts in CSS — SitePoint
• 前端精选文摘：BFC 神奇背后的原理
• Block formatting context - MDN