修改innerText致DIV溢出、位置重叠：单个字符引发溢出的原理问询

这个问题其实涉及CSS盒模型、溢出规则和格式化上下文的核心逻辑，我来拆解一下为什么哪怕单个字符也能搞出这么大的动静：

一、为什么单个字符会触发溢出？ #

CSS中容器的默认溢出行为是overflow: visible——也就是说，只要内容的尺寸超出了容器的边界，溢出部分就会直接在容器外部渲染，而不会改变容器本身的尺寸（如果是固定宽高的容器，这个表现会更明显）。单个字符引发溢出通常有这几种典型场景：

• 字符尺寸超出容器固定边界：比如你给div设了width: 20px，但单个中文字符、全角符号或者某些宽emoji的实际渲染宽度是22px，这时候字符就会横向溢出容器。溢出的部分会挤占旁边元素的空间，导致其他div被挤移位或者重叠。
• 垂直方向的字符溢出：如果div的height被固定，或者line-height设置得比字体的实际高度小，字符的上下延伸部分（比如手写体的夸张笔画、字母的上伸/下伸部分，像"b"的顶部、"g"的底部）就会超出容器的垂直边界。比如你设了line-height: 16px，但字体的默认高度是18px，字母"g"的下半部分就会溢出div底部，直接覆盖下面的元素。
• 内联块级元素的基线对齐坑：如果你的div是inline-block类型，插入文本后，它的基线会和其他inline-block元素的基线对齐。而带下伸部分的字符（比如"g"、"y"）会把容器的基线往下拉，导致整个div的位置偏移，和旁边的div重叠。这时候overflow: hidden会直接改变inline-block的基线规则——让它的底部作为对齐基准，瞬间解决偏移问题。

二、overflow:hidden解决问题的核心原理 #

设置overflow: hidden后，会触发两个关键的布局变化：

1. 裁剪溢出内容：容器边界外的内容会被直接裁剪，不再参与外部布局计算，自然不会挤占其他元素的空间。
2. 创建块格式化上下文（BFC）：BFC是CSS中一个独立的布局环境，它会包含内部所有的内容，同时BFC元素不会和其他浮动元素重叠，也会修正内联元素的对齐逻辑（比如刚才说的inline-block基线偏移问题），从根源上避免了布局移位和重叠。

举个直观的例子：如果你的div是inline-block且没设overflow: hidden，插入带下伸部分的字符后，它的基线会和相邻inline-block的基线对齐，导致整个div下沉；而设了overflow: hidden后，div的底部会和相邻元素的底部对齐，位置立刻就稳定了。

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