Saman.T
Saman.T

Reputation: 3

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

The definition of normal flow in the W3C CSS 2.1 spec says this:

Normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

So my first question is: what is exactly is the meaning of “participate”?

And in the definition of "block formatting context" (BFC) it says:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

As we know, in a block-container box (that is NOT "block formatting context") boxes are laid out exactly like the above definition that is specified for "block formatting context".

So my second question is: “participate” means that the behavior of the layout of a block container is the same as "block formatting box"?

And for the reason of my last question I cite this definition :

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

When we create a div (that is not BFC) block container box that contains an image and a paragraph, itt behaves exactly like the above definition:

img {
  float: left;
}

p {
  border: 1px solid red;
}
<div>
  <img src="http://placehold.it/100x100&text=1">
  <p>
    the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like
    block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!!
  </p>
</div>

And even if we change the p element to block-formatting context in the div, it behaves exactly like the definition below:

img {
  float: left;
}

p {
  border: 1px solid red;
  overflow: auto;
}
<div>
  <img src="http://placehold.it/100x100&text=1">
  <p>
    the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like
    block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!!
  </p>
</div>

If we change the div to a block formatting context, it exactly behaves like previous example:

div {
  overflow: hidden;
}

img {
  float: left;
}

p {
  border: 1px solid red;
  overflow: hidden;
  margin: 0;
}
<div>
  <img src = "http://placehold.it/100x100&text=1">
  <p>
  the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> 
  </p>
</div>

...am I right?

Upvotes: 0

Views: 358

Answers (1)

BoltClock
BoltClock

Reputation: 723729

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.

Upvotes: 4

Related Questions