有关overflow:hidden 影响布局的问题

Question

http://jsrun.net/WfpKp/edit

为什么 box-b 偏移的原来的位置?
如果 box-a 不设置 overflow:hidden; box-b不会偏移原来的位置

Answer 1

a 与 b 都是 inline-block且高与父元素 c 相同均为 30px，而在a加上 overflow:hidden; 会使 a 的底线与整个父元素 c 的 text baseline 对齐，相当于 c 中的文本获得了两倍的空间，整个 c 的 高度变大，仔细观察例子不难发现，a 中字符的底线与 b 中的字符的顶线对齐了，

解决办法

.a, .b {
  width:48%;
  height:30px;
  line-height:30px;
  display:inline-block;
  vertical-align: bottom;
}

加了一个vertical-align: bottom;解决基线对齐问题。

Answer 2

谢邀. 规范是这样的:

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

.a 完全满足上面的这种情况, 故 .a 的下外边距边缘同 .b 内文字的基线对齐, 使得实际效果中看起来 .b 的位置似乎发生了偏移.

更多原理在这里：https://segmentfault.com/a/11...

Answer 3

支持楼上，还有关于解决 inline-block 中间的间隙问题，可以参考 stackoverflow，

<div class='c'>
    <div class='a'>fhsald</div><div class='b'>gasdg</div>
</div>