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?