Implications of Block Formatting Context

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?

Have you read https://www.w3.org/TR/CSS21/visuren.html#block-formatting and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context? — j08691, Jan 31 '16 at 22:32
I've read both those articles but to be honest, I find the explanations too terse and not practical / visual enough for me to understand. I think there's a lot of terminology / jargon going on in there and I've found it hard to understand in the context of actual HTML / CSS. — wmock, Jan 31 '16 at 22:36

tzi · Accepted Answer · 2016-02-03T11:47:52.407

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.

You're right, but its *just* inline elements, its not a rendreing mode that you can trigger with some properties. — tzi, Jan 31 '16 at 23:57

Implications of Block Formatting Context

1 Answers1