Display: Block Inside Display: Inline

虽然问题提出了 display:inline 父级中的 display:block 元素的场景，根本问题是在这种情况下这两个显示值之间的差异。

根据 CSS 2.1 规范，当行内元素包含块元素时，行内框在块周围会被破坏。围绕块前后的内联内容创建匿名块框，并且该块成为这些匿名框的同级。

这会产生一个结构，其中父元素（即使它被定义为显示）：内联，由于 display:block 子级的存在而表现不同。父元素实际上成为包含匿名块框的块框。

显示：内联和显示：块父元素之间的差异

尽管结构相似，但存在细微差别此场景中 display:inline 和 display:block 父元素之间的区别：

• 内容流： 内联元素随文本水平流动，而块元素垂直流动。围绕内联父元素创建的匿名块框允许垂直堆叠子元素，模拟块行为。
• 匿名块框生成： Display:inline 导致为与子块相邻的内联内容。这与 display:block 父元素的情况不同，其中整个父元素变成了块框。
• 边框处理： CSS 2.1 规范指出某些属性，例如边框、仍然适用于生成匿名块框的元素。因此，带有边框的 display:inline 父级将在匿名块框周围绘制边框，从而在换行符处创建开放边框。相反，带有边框的 display:block 父级将在整个块框周围有一个闭合边框。
• 文本环绕： 内联元素自然地将文本环绕在它们周围。在这种情况下，内联内容周围的匿名块框会阻止文本环绕块子元素，就好像父元素是 display:block 元素一样。