块级元素与内联元素并列？

LZ混淆了Doctype定义下分类各个标签的块级、内联概念和CSS的块级、内联概念。

Doctype定义中的inline/block

第一个跟Doctype定义有关，你看到的这个规则，是XHTML Strict中定义的。那么这个语境下的inline和block是什么意思呢，它们是对html标签进行的分类（比如p、div、form都属于block，而span、a则属于inline），而和它们最终的CSS属性一点关系都没有（你可以把p的display改为inline，浏览器不会打死你，但是接替你的页面重构可能会）。

这个在Doctype里定义的规则直接导致了浏览器parse整个文档的时候构建成的树是什么样子的。
这里有一篇非常棒的关于元素嵌套规则及其对文档结构影响的说明，你可以读一下。

总结：Doctype这个语境下面，inline和block指的是一种分类各个标签的方法，这个方法由各个标签的语义和默认的展现形式得来，区分它们主要是因为它们在不同的doctype里面会有不一样的嵌套约束，会影响到浏览器生成的文档结构。

CSS的block和inline

LZ第二个代码规范的建议和CSS中高宽计算模式有关系：
1.块级只包含块级的时候，进入的模式是块级∈块级模式，相关计算规则大致是
内层宽自适应于外层的content-box的宽；
外层的content-box自适应于内部所有块级容器的高；
等等等等。
2.块级只包含内联元素的时候，进入的模式是内联∈块级模式，相关的规则大致是：
内联构成line-box，line-box的高由内联元素的高、line-height和vertical-align决定；
通过断行算法，内联元素组成N个line-box，line-box的宽由块级元素的content-box的宽决定；
各个line-box撑高块级；
等等等等。
3.块级元素同时包含块级元素和内联元素的时候，会为每个内联元素创建匿名块，从而拆解问题为块级/匿名块∈块级模式和内联∈块级/匿名块模式，回到规则1,2去计算各个元素的最终宽、高。

LZ第二个代码规范可以这样解释：由于第三个规则的存在，所以为了能够在所有时候都能完美的控制块级元素的高和宽，内联元素和块级元素并列时，在内联元素外包裹一层块级元素。

总结：在CSS属性这个语境下面，inline和block指的是元素最终的display属性，区分它们主要是因为它们会导致不一样的高宽计算模式。