Inline- And Block-level Boxes Inside The Block-container Box

In the CSS spec in sec 9.2.1 said: Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A bl

Solution 1:

The spec goes on to say:

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

So the inline elements are wrapped in "anonymous blocks" (generated by the CSS engine in the browser, and invisible to your DOM inspector), that are block-level, and all children of the container are therefore block-level, instead of a mix of block- and inline-elements.