为何隐藏overflow会破坏元素垂直对齐？

现象 #

• 当#second（蓝色背景元素）设置overflow: hidden时，左侧红色的FOO[和右侧的]BAR无法垂直对齐
• 点击按钮取消#second的overflow: hidden属性后，两者立刻对齐
• 检查元素盒模型，发现#first和#second的高度均为1em，但渲染表现明显不一致

原因分析 #

这是inline-block元素的垂直对齐规则和overflow:hidden触发的BFC（块格式化上下文）共同作用的结果：

1. 默认状态下，inline-block元素的垂直对齐方式是baseline（基线对齐）。对于没有触发BFC的inline-block，它的基线是自身的底部边缘；
2. 当元素设置overflow:hidden时，会触发BFC，此时该inline-block的基线会变成内部最后一个行内元素的文本基线；
3. 在你的代码里，#first未触发BFC，基线是自身底部；而#second触发了BFC，基线是内部]BAR文本的基线（该基线位置比元素底部要高），两者基线位置不同，自然无法对齐；
4. 取消overflow:hidden后，#second不再触发BFC，基线变回自身底部，和#first的基线重合，因此对齐。

解决办法 #

可以通过以下两种方式解决：

1. 强制统一垂直对齐方式：给两个inline-block元素设置相同的vertical-align值，比如bottom：

#first, #second {
  vertical-align: bottom;
}

2. 让两个元素都触发BFC：给#first也添加overflow:hidden属性，使两者的基线规则一致：

#first {
  overflow: hidden;
}

原代码展示 #

HTML

<button>Toggle overflow for #second</button>
<main>
  <span id="first">
    FOO[
  </span><span id="second">
    <div>]BAR</div>
    <div>]BAZ</div>
  </span>  
</main>

CSS

* {
  margin: 0;
  padding: 0;
  line-height: 1em;
  box-sizing: border-box;
}
main {
  background: #eee;
  padding: 1em;
  font-size: 8vw;
}
#first {
  background: red;
  display:inline-block;
  height: 1em;
}
#second {
  background: blue;
  display:inline-block;
  height: 1em;
  overflow: hidden;
}

JS

const target = document.querySelector("#second")
const button = document.querySelector("button")

toggle = true
button.addEventListener("click", () => {
  if (toggle) {
    target.style.overflow = "initial"
  } else {
    target.style.overflow = "hidden"
  }
  toggle = !toggle
})

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