According to CSS Spec2.1:
When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
This model would apply in the following example if the following rules:
p { display: inline } span { display: block }were used with this HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.
Also note that <P> is an inline box since it has a display of “inline” and is non-replaced and its content participate in a inline formatting context (IFC):
An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box
According to the snippets above, <P> is an inline box that contains a block-level element <SPAN>
Now at the same time the spec says:
Block-level boxes are boxes that participate in a block formatting context
Since the the <SPAN> is a block-level box, it participates in a BFC
But at the same time its contained by an inline box <P> and since all contents of an inline box participates in an IFC hence <SPAN> also participates in an IFC?
From what I understand, the <SPAN> element participates both in IFC and BFC?. Is this even possible?