Html 为什么内联块div在悬停时改变位置？

我有两个并排的直列块样式的div。当使用纯CSS将悬停时的溢出从隐藏更改为可见时，为什么div会更改位置

。重叠{
宽度：14.2%；
高度：50px；
字号：1rem；
显示：内联块；
文本对齐：居中；
线高：200%；
颜色：黑色；
位置：相对位置；
背景：黄色；
溢出：隐藏；
}
.重叠：悬停{
溢出：可见；
}
.包装纸{
高度：200px；
宽度：100%；
背景：浅蓝色；
}

一些较长的文本
其他部门

您可能应该更改

高度

而不是

溢出

设置

同时将

min height

和

float

添加到框中

。重叠{
宽度：14.2%；
最小高度：50px；
高度：50px；
字号：1rem；
显示：内联块；
文本对齐：居中；
线高：200%；
颜色：黑色；
位置：相对位置；
背景：黄色；
溢出：隐藏；
浮动：左；
}
.重叠：悬停{
高度：自动；
}
.包装纸{
高度：200px；
宽度：100%；
背景：浅蓝色；
}

一些较长的文本ddg dfg sdfg sdfg SDFGSDFGSDFGFGSDFGSD fgsd fgsd fgsdfgsdfgs dfg sert sert sertsertsertgs dfgsdfg dfgsdfg
其他部门

默认情况下，内联块具有

垂直对齐：基线

，这就是为什么当另一个高度发生变化时它会跳转。要解决此问题，请添加

.overlaping {
  vertical-align: top;
}

---

修改.重叠样式，如下所示

。重叠{
宽度：14.2%；
高度：50px；
字号：1rem；
浮动：左；
右边距：5px；
文本对齐：居中；
线高：200%；
颜色：黑色；
位置：相对位置；
背景：黄色；
溢出：隐藏；
}

@AndreiGheorghiu它之所以跳跃是因为溢出：隐藏将元素的基线更改为底部边缘。使它可见会使基线考虑文本（默认行为）@ TEMANIAFIFF，技术上这不是复制品，因为问题是不一样的，尽管答案是。在我的示例中，我更改了overflow属性。如果我的div中有一个文本没有溢出，并且两个div都有

溢出：隐藏

或

溢出：可见

，它们将始终正确对齐。这是重复的，因为问题是由于垂直对齐（默认为基线）+溢出改变了基线。第一个副本解释了默认对齐方式是基线，第二个副本深入解释了当我们更改不同属性（如溢出）时基线和垂直对齐方式的行为。如果你明白这一点，那么你将能够理解你的问题，因此这是一个重复的问题。我明白你想说什么。但他们都没有提到更改

溢出
属性。改变是至关重要的，这给了它另一个背景。两种变体均有效：和。而那个不工作的：。如果我不使用
：hover
选择器更改
溢出
属性，则所有内容都将正确对齐。
如果我不使用：hover选择器更改溢出属性，则所有内容都将正确对齐。
-->因此，您确认它是重复的，因为溢出属性已更改，并且溢出属性正在更改基线。重复说明溢出与垂直对齐和基线有关。如果你理解这一点，你会明白改变这个属性是在创建这个问题，你必须考虑用不同的方式对齐你的元素。