Implications of Block Formatting Context - html

Question

Consider the following HTML and CSS:
<div class="container">
<span>This text appears inside a span tag which is an inline element.</span>
<p>This text appears inside a paragraph tag which is a block element.</p>
<span>This is another inline element.</span>
</div>
.container {
overflow: hidden;
}
Based on my understanding from the following SO question, by adding overflow: hidden to the .container class will establish the div as a new Block Formatting Context.
Question
How does this affect the span and p tags inside of the div? Specifically, what does creating a new block formatting context actually do to its children elements (in this case, inline span elements and a block p element)?
Related Question
What is an example of an Inline Formatting Context getting created? Can someone provide a HTML example and explain how it is established? What does the inline formatting context actually do to its children elements?

Answer 1

A block formatting context is a tool to help browsers render elements. It prevents tricky cases, so it's not really visual.
For example, float elements are not in the page flow. So other elements could be under or wrap around a floating element.
.float {
float: left;
width: 50px;
height: 50px;
margin: 10px;
background: turquoise;
}
.container {
height: 100px;
margin-left: 30px;
background: tomato;
}
<div class="float"></div>
<div class="container"></div>
So what should happen if we add a overflow: hidden to the .container element? Should the float element be cut because its over it? But the floating element is not actually inside the container...
It's one of the tricky cases, so browsers declared that overflow: hidden would trigger a safe rendering mode: Block formatting context. It will prevent the container from being around floating elements or to contain elements that are floating outside of its scope.
.float {
float: left;
width: 50px;
height: 50px;
margin: 10px;
background: turquoise;
}
.container {
height: 100px;
background: tomato;
/* BFC */
overflow: hidden
}
<div class="float"></div>
<div class="container"></div>
It seems that inline formatting context is the normal way that browsers render inline elements, those that are not rendered as block formatting context.
This rendering mode allows several elements to be on the same line. Their flow is affected by the writing direction, font-size, line-height... It also can be cut to be wrapped on several lines, etc.