Who is responsible for establishing formatting context for `body` element?

Question

I'm reading CSS2.1 spec to understand CSS's visual formatting model. The concept is confusing to me, and it seems that there are no articles explaining it more intuitively.

My point is who is responsible for establishing an initial formatting context for body element. When two divs are placed inside of body, they are vertically stacked each other, as follows:

<body>
    <div>1</div>
    <div>2</div>
</body>

Because body element consists of two block-level boxes and they are vertically stacked, two boxes seem to participate in a block formatting context. In this situation, the body element acts as block container box. What is not understood to me is who establishes the block formatting context.

At first, i thought that any elements establish block/inline formatting context on its own. But after reading this below, i realized it isn't. Certainly, the body(or div etc) is not floats, absolutely positioned, or block containers that are not block boxes, etc:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

Update : I reported this issue in w3c/csswg-drafts.

Pretty sure the html element provides that. Not sure how or if it can be derived from the spec but it's mentioned over on MDN. — Ouroborus
@Ouroborus Do i understand this concept correctly? The html provides initial formatting context. All descendant elements from html inherit and use that formatting context by default. But when i applied floats to an element, the element drops the initial formatting context and then creates new block formatting context on its own. — rosshjb
it's not an inheritance, all the element by default are part of the html formatting context BUT you can create more inside it — Temani Afif
@rosshjb Temani is likely more of an expert on that topic than I am and his answer still went to the practical considerations. As far as trying to understand the spec, know that the W3C sepcs are more of a description of common practice than a specification. They can be missing some details or, very rarely, get them wrong entirely with respect to common implementations. This is truer of the older specs. I suspect the detail you're asking about is one of those missing bits. — Ouroborus

Temani Afif Temani Afif · Accepted Answer · 2021-10-02T08:52:35

the body element acts as block container box.

No, it doesn't. We can easily proove it by using a float element:

.float {
  height:50px;
  width:50px;
  background:red;
  float:left;
}


body {
  border:2px solid blue;
}

html {
  border:2px solid green
}

<div class="float"></div> some text here

The float is overflowing the body element so this one is not creating a BFC but the html element is doing so your div are part of the BFC created by the html element.

If you add overflow:auto to the body you will create a BFC and the float will behave differently:

.float {
  height:50px;
  width:50px;
  background:red;
  float:left;
}


body {
  border:2px solid blue;
  overflow:auto;
}

html {
  border:2px solid green;
  overflow:auto; /* we need this to disable the overflow propagation */
}

<div class="float"></div> some text here

Who is responsible for establishing formatting context for `body` element?

1 Answers