格式化上下文到底是什么？

From MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts:

页面上的所有内容都是格式化上下文，或已定义为以特定方式布局内容的区域。

所以，根据 MDN 的说法，格式化上下文 is an area。但尚不清楚他们所说的“面积”是什么意思。这里的“面积”是什么意思？

也来自MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context:

A 块格式化上下文是网页视觉 CSS 渲染的一部分。它是块框布局发生以及浮动与其他元素交互的区域。

成为网页元素的视觉 CSS 渲染的一部分在这里意味着什么？它说，这是一个region，与area从上面的摘录。然后它说，BFC是一个区域——我想，它们是指视觉区域或视口区域——布局（html 元素的视觉组织）发生的地方。

“一个元素建立格式化上下文”是许多 CSS 教程中使用的非常常见的短语。display: flow-root成立 BFC。

.box {
  background-color: #ddd;
  padding: 1em;
}

.box-1 {
  background-color: brown;
  width: 7em;
  height: 7em;
}

.box-2 {
  background-color: cadetblue;
  width: 7em;
  height: 7em;
}

.para {
  background-color: yellowgreen;
}

<div class="box">
  <div class="box-1"></div>

  <p class="para">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquam nisi necessitatibus consequuntur ducimus dolor maxime cumque repellat? Explicabo dolore deleniti aut sequi assumenda dolor ex deserunt, blanditiis itaque eum.
  </p>

  <div class="box-2"></div>
</div>

在这里，.box元素及其所有内容都是初始块格式化上下文——这是 MDN 和其他教程所说的。现在，如果我添加 CSS 声明display: flow-root to .box, the .box元素将建立一个新的 BFC，然后其所有内容将成为该新建立的 BFC 的一部分，或者将参加在那个 BFC 里。而且，由于根据 MDN，BFC 是布局“存在”（发生）的视口区域，因此视口区域（可能是元素的填充框的区域）.box父元素占用的必须是它所建立的BFC。

我对吗？你能说得更清楚吗？

格式化上下文并不是真正的区域。它更多的是一个state定义适用于其自身及其参与者框的布局规则集的框。