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

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.

CodePudding user response：

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