7

From the CSS Display Module Level 3 specs there is a note about block container that says:

Note: A block container box can both establish a block formatting context and an inline formatting context simultaneously.

How is this possible conceptually?

And how are children boxes laid out then? For example, if we have both inline-level and block-level boxes inside block container, which formatting context is used in that case? Are both formatting contexts used at the same time or one of them "wins" and the other one is put aside?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
mlst
  • 2,688
  • 7
  • 27
  • 57
  • 3
    If we have both inline-level and block-level element inside a block container the inline one will belong to an anonymous block-level element so that we always have block-level element at the same level (https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level) – Temani Afif May 21 '19 at 12:28
  • 1
    I have a feeling that this should be written *cannot* but I was told this before too: https://stackoverflow.com/questions/55653761/what-formatting-context-applies-to-elements-that-dont-create-their-own/55659706#comment98000228_55653761 – Temani Afif May 21 '19 at 12:49

1 Answers1

3

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>

.formatting.contexts {
  overflow:auto;
}

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

In the first example, the text wraps underneath the image. That's because the div with class "formatting contexts" has overflow:visible, so it doesn't form a block formatting context.

However, it contains only inline boxes - formed by the text content. So by the CSS rules, it establishes an inline formatting context. The text content can therefore be laid out horizontally in line boxes within this context. It is the first line box which is shrunk to avoid overlapping with the float.

In the second example, the text does not wrap underneath the image. That's because the div with class "formatting contexts" now has overflow:auto which means that it establishes a block formatting context, and it is the block box that is shrunk to avoid it overlapping the float. But its contents are just the same, just inline boxes, so it also establishes an inline formatting context.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 1
    So we can establish an IFC and BFC only if we have inline-level elements inside a block-level one with overflow different from visible? If it's the case, I think we will not have margin collpasing since we deal only with inline-level element. Also if we introduce a float element which is a block element (or will become a block element) we will break the IFC and we will only have a BFC, no? – Temani Afif May 22 '19 at 00:12
  • 3
    Removed the misdirection caused by mentioning margin collapse. If the float is introduced *inside* the block box, then that block box cannot establish an IFC. An anonymous block box will be created inside the block box that will be the one that establishes the IFC. – Alohci May 22 '19 at 00:58