W3C规范中是否规定block-level boxes自动被line boxes包裹？

嘿，这个问题问得很细致啊！直接给你结论：W3C CSS 2.1规范里并没有规定block-level boxes会被line boxes包裹——line boxes是完全属于内联格式化上下文（IFC）的专属概念，只存在于IFC内部，由inline-level元素生成，和block-level boxes分属不同的排版规则体系。

为什么你会看到inline元素溢出到block上？ #

你观察到的蓝色inline元素的padding/border溢出到绿色block元素上的现象，本质是正常流中block和inline元素的垂直渲染规则导致的，和“block被line box包裹”完全没关系：

• block-level boxes在正常流中要么形成独立的块格式化上下文（BFC），要么参与包含块的格式化上下文，它们是垂直堆叠的，彼此的margin会折叠，但本身的边界不会自动裁剪外部的非定位inline内容。
• inline元素的padding、border属于其渲染盒的一部分，但这些部分不参与line box的高度计算（正如你引用的规范所说），所以当line box的高度不足以容纳这些额外的区域时，这些内容就会向上下方向溢出——而相邻的block元素并没有设置裁剪溢出的属性（比如overflow: hidden），所以溢出的内容就会覆盖在block元素的区域上。

再结合你引用的规范细节 #

你提到的规范段落里说“溢出到相邻的line boxes”，指的是同一内联格式化上下文内部的相邻line boxes（比如多行文本的不同行）。而当inline元素和block元素相邻时，block元素属于块格式化上下文，和inline的IFC是分开的，两者的渲染层级是重叠的，所以你会看到溢出的内容“跑到”block的区域上，但这并不代表block被line box包裹了。

验证小技巧 #

你可以试试给绿色的.one块元素加上overflow: hidden属性：

.one { border: 1px solid green; overflow: hidden; } 
.two { border: 1px solid red; } 
.three { line-height: normal; border: 1px solid blue; padding: 10px 0; }

这时候蓝色元素的padding就不会再溢出到绿色block上了，这也能佐证block本身并没有被line box包裹，只是之前没有对溢出内容进行裁剪而已。

内容的提问来源于stack exchange，提问作者Magnus