CSS 行内块元素overflow:hidden后偏移问题

现象

<div class="layui-col-md1" style="padding:0px;background-color: #0bb2d4">
    最外层块C__
    <div style="display:inline-block;width: 30%;background-color: yellow;overflow: hidden;line-height:30px;text-align: right;padding: 0 0 30px 0;">_块A_
    </div><div style="display:inline-block;width: 20%;background-color: green;line-height:30px;padding: 0 0 20px 0;">
        __块B</br>
        __块B(最后一个行盒)
    </div>
</div>

解决办法：

（把元素的底端与父元素字体的底端对齐）
为向上偏移的块（例中块A）设置：vertical-align: bottom;

相关规范：

行内块的基线为其文档流内最后一个行盒的基线，除非该行内块没有文档流内行盒或者其 overflow 属性计算值不为 visible，这种情况下基线为下外边距边缘。

分析（根据规范）

块A：块A设置display:inline-block;overflow: hidden;后overflow不为visible，则其在父div中的基线为其下外边距边缘。
块B：块B不受影响，其在父div中的基线为其文档流内最后一个行盒的基线。

相关参考：
有关overflow:hidden 影响布局的问题
CSS文本基线的对其方式
CSS规范 > 10 视觉格式化模型详述 Visual Formatting Model Details