What Is Meant by "Participate" in The Definition of "Normal Flow" in The CSS 2.1 Spec

What is meant by participate in the definition of “normal flow” in the CSS 2.1 spec?

When a box is said to participate in some formatting context, it just means that element is laid out according to the rules of that formatting context. If an element participates in a block formatting context, it's block-level and it's governed by block layout. If an element participates in an inline formatting context, it's inline-level and it's governed by inline layout. And so on.

"Block container box" and "block formatting context" are two different and only very loosely related concepts. You seem to be conflating them, which is unwise.

A block container box establishes a block formatting context only under certain conditions. The criteria for this to happen are listed in the spec, but basically the only time a block container box doesn't establish a BFC is when it has display: block; overflow: visible; float: none; position: static/relative (from here).

As stated in the spec, every block-level box participates in some block formatting context. It doesn't matter whether its parent block container establishes a BFC. If its parent doesn't establish a BFC, then the parent's parent, or the parent's parent's parent, or some other ancestor higher up in the tree — all the way up to the root element — does. This means that a single block formatting context can — and almost always does — encompass many nesting levels of elements. This is collectively referred to as the normal flow.

Even if you had an entire layout of block boxes, if none of them establishes a BFC, then all of them participate in the same BFC that's established by the root element (and the root element is guaranteed to establish one). In the following example, all three elements participate in the root element's BFC, and so they are governed by block layout, even though none of them establishes its own BFC:

<body>
  <div>
    <p>
  </div>
</body>

The effects of overflow: hidden on block formatting contexts in the presence of floats are discussed elsewhere, but in short, floats never intrude into other block formatting contexts, which is why making the p establish its own BFC causes it to become narrower due to the float. Making the div establish its own BFC doesn't change anything because, once again, the p is still participating in some BFC regardless — you're just changing whose BFC it's participating in.

What is the difference between Normal Flow, Flow Layout, Block and Inline Layout?

Normal flow = flow layout = block-and-inline.

block-layout ≠ inline-layout

CSS2 describes block layout:

In a block formatting context, boxes are laid out one after the other, vertically², beginning at the top of a containing block.

and inline layout:

In an inline formatting context, boxes are laid out horizontally², one after the other, beginning at the top of a containing block.

There's plenty more detail¹ there, but that's the essence of the layouts.

The purpose of "Normal flow" is provided a single term of layout to be contrasted with floated and positioned layout, and the internals of other independent formatting contexts.

¹ Pretty much the entirety of sections 9 through 16 of the CSS 2.2 specification are describing that detail.

² "Vertically" and "Horizontally" here assumes a horizontal writing-mode. CSS 3 introduces a vertical writing-mode where everything's rotated though 90°, so "vertically" and "horizontally" are reversed.

In the CSS Visual Formatting Model, what does the flow of an element mean?

An element is called out of flow if it is floated, absolutely positioned, or is the root element.

If an element is floated, position:absolute, position:fixed or the <html> element, it is out of flow.

An element is called in-flow if it is not out-of-flow.

Self-explanatory.

The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

This is ridiculously confusing. And there seems to be nothing online providing a good explanation. In fact, even the CSS Working Group refers to this phrase as "nonsensical".

What formatting context applies to elements that don't create their own?

Put simply, every block sits in a formatting context. Blocks that have no special properties (e.g. divs with no extra CSS attached) all sit in their parent's formatting context.

Only when a block has properties like position, float, opacity etc., does a new formatting context get created for the block and its contents.

And to answer your question what's it called when a block does not create a BFC of its own, that's simply what the W3C page calls "normal flow".

CSS Spec: child element exceeds left edge in a Block Formatting Context

You are using position: relative to offset the child from its original, static position. From section 9.4.3 (emphasis mine):

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position.

This means that layout happens before relative positioning, which means that as far as layout is concerned it is the static position, not the relative position that is bound by these rules.

Removing position: relative; left: -50px, you can see that the child element's left outer edge does indeed touch the parent's left content edge (and likewise for the right, but only because the child width is auto).

Why the boxes in an inline formating context was laid out vertically?

The premise of your entire question is flawed. Assuming the inner divs retain their default styles, then they are block boxes, which means #wraper can't possibly establish an inline formatting context in that situation in the first place.

The inner divs participate in block layout, but they participate in whatever BFC that is already there (that #wraper itself also participates in). This can be from some ancestor that meets the criteria for establish a BFC; otherwise, it's the BFC of the root element.

What Is Meant by "Participate" in The Definition of "Normal Flow" in The CSS 2.1 Spec