1

I'm trying to understand this CSS concept, Visual Formatting Model, specifically on this part, Controlling box generation.

From the spec of Anonymous Block Boxes, in their example has a markup like this:

<DIV>
  Some text
  <P>More text
</DIV>

And this is their explanation:

(assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

At first, implying from the spec, I thought that an anonymous block box would be applied only on a text. However, in a bit more complex example, it seems not right, like this one:

<div>
    some <em>text</em>
    <p>More text</p>
    and more <em>text</em>
</div>

some cannot be considered as an anonymous block box but the entire line some <em>text</em>. Because, if only some is considered an anonymous block box, then <em>text</em> would be another one; hence these 2 anonymous block boxes would position not in the same line. And so, the same thing goes for an another anonymous block box after the p block box,and more <em>text</em>.

So, in totality, there are 3 block boxes (2 of them are anonymous block boxes):

  1. An anonymous block box: some <em>text</em>.
  2. A block box: <p>More text<p>.
  3. An anonymous block box: and more <em>text</em>.

Which will look like this: identifying anonymous block level boxes

Finally, can I straight up conclude it this way? In case of anonymous block box generation, if a block container has a block-level box inside it, then this algorithm — Box Generation will treat any boxes inside this block container as a block-level boxes. And by doing so, any boxes that is not a block-level box will be internally/conceptually treated as an anonymous block boxes, which is basically a block-level box anyway.

Do I understand these things right? Or, am I totally wrong at this point?

Community
  • 1
  • 1
BillyBoy
  • 13
  • 4

1 Answers1

1

Box Generation will treat any boxes inside this block container as a block-level boxes. And by doing so, any boxes that is not a block-level box will be internally/conceptually treated as an anonymous block boxes, which is basically a block-level box anyway.

No, it creates anonymous block boxes with inline formatting contexts, which enclose the inlines. The inlines (or whatever other boxes that aren't block-level boxes) do not change. They continue to participate in the same formatting contexts they normally would; this algorithm ensures those formatting contexts are established by anonymous block boxes, that in turn participate in the same block formatting context as the parent element.

The illustration is mostly correct, with the exception that the principal block-level box doesn't always establish a block formatting context. You may also be getting the terms "block formatting context", "block-level box", "block container box", and "block box" mixed up; see my answers to these questions for additional clarification:

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Would you please enlighten me, why you said "[...]the principal block-level box doesn't always establish a block formatting context."? – BillyBoy Oct 28 '18 at 13:42
  • @BillyBoy: From the second link: "A block box with the CSS properties display: block; overflow: visible; float: none; position: static (or position: relative) does not establish a BFC." The block box's block-level descendants participate in the same BFC as itself, not in a separate context. It's what allows floats to work. – BoltClock Oct 28 '18 at 13:43
  • I see.. I missed that part. Thank you for your information. IMO, these concepts are so hard. Without your help, I don't know how can I get these things. D: – BillyBoy Oct 28 '18 at 13:52