What Formatting Context Applies to Elements That Don't Create Their Own

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".

What exactly is a formatting context?

A formatting context is not really an area. It's more a state of a box that defines the set of layout rules that apply to itself and its participant boxes.

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.

How can block container establish both block and inline formatting contexts at the same time?

It's entirely possible, and even necessary for certain CSS rules. The easiest way to understand this is with an example of such a box.

<div style="overflow:auto">hello world</div>

Here we have an element with display:block (by default for div elements) and overflow:auto. This is one way that an element's rendered box will establish a block formatting context. This affects, for example, how the box's location and dimensions are affected by the presence of floats.

Compare these two examples:

.formatting.contexts {

  overflow:visible;

}

.container {

  width:70px;

}

img {

  float:left;

  margin-right:3px;

}

<div class="container">

  <img src="http://placehold.it/16" alt="placeholder grey square less than one line in height">

  <div class="formatting contexts">hello world</div>

</div>

When does a box establish an inline formatting context?

To answer your question, I reread Section 9.2.1 of the CSS 2.1 spec.

Based on my reading, you have your answer: the inline formatting context is triggered when a block container box contains only inline elements.

In contrast to a block formatting context that can be triggered explicitly (for example, setting overflow: hidden to a block-level element), an inline formatting context cannot be triggered explicitly.

Inline formatting contexts appear to always exist as descendant block boxes within a "principal block-level box", and these descendant block boxes may be anonymous.

I offer the following description as a mental model for understanding block/inline formatting contexts.

A block-level element (e.g. a <div>) fulfills two responsibilities: one, positioning, and two, content formatting.

When dealing with positioning, a block-level element acts as a "block-level box".

When dealing with formatting, a block-level element acts as a "block container box".

Acting as a "block-level box", the block-element behaves according to the type of positioning (static, absolute, relative, fixed) specified by the position property.

Acting as a "block container box", the block-element establishes a block-formatting context if the block-element has at least one child block-level element. If all the child elements are inline-level boxes, then an inline-formatting context is established.

If the "block container box" contains text and block elements, then the text is treated as being contained in one or more anonymous block-level boxes, and a block-formatting context is established.

Aside
The CSS spec is not exactly light reading. I have reread Chapters 9 and 10 several times and I have yet to come up with a plain-English translation.

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.

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.

Why are fixed and absolute positioned elements considered block formatting context, but not a relatively positioned elements?

I would say because position:relative doesn't change the behavior of the element like absolute and fixed will do. When setting an element with absolute and fixed, it will get removed from the flow. It's like you remove a fragment of the page to make it independent thus it need to establish a new block formatting contexts.

Whith position:relative it's different.

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

then

A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it.^ref

Basically, position:relative will keep the behavior of the element and will simply allow you to shift its position after being placed in the normal flow. You need to check the other properpties to see if the element will establish a BFC or not.

You may also note that positon:relative apply to inline element and inline element should not establish a BFC.

---

Related Topics