聊天气泡布局核心是用margin-left:auto和margin-right:auto控制左右对齐，禁用float和absolute；尾巴用双层伪元素三角实现；长文本需max-width:80%并按语言设置换行；滚动需nextTick确保DOM渲染完成。
聊天气泡不是靠 float 或 absolute 实现的，一用就崩——时间戳错位、新消息不滚动、响应式下重叠，全是因为脱离了文档流。核心就一条：margin-left: auto 和 margin-right: auto 控制左右，其他都是围绕它补细节。
怎么让用户消息靠右、对方消息靠左
别碰 float，也别写 position: absolute。用户消息加 class="mine"，内部容器（比如 <div class="bubble">）设 margin-left: auto；对方消息用 class="theirs"，保持默认左对齐，或显式加 margin-right: auto。
必须注意：
-
margin-left: auto只对display: block或inline-block生效，不能套在flex容器子项里直接用（会失效） - 如果外层用了
display: flex，那就直接给 mine 项加margin-left: auto，theirs 项不加任何 margin - 禁用
text-align: right模拟右对齐——它只动文字，不动气泡框本身，会导致尾巴错位
怎么画出带边框的小尾巴（三角箭头）
用伪元素 + 0 宽高 + 单边框，这是唯一稳定方案。图片、SVG、canvas 都会缩放失真或兼容性差。
立即学习“前端免费学习笔记（深入）”；
左气泡尾巴（theirs）：
- 用
::before，border-color: transparent #ff6a00 transparent transparent -
left: -12px定位，top: 6px对齐气泡中线 - 必须设
z-index: 9，再用::after盖一层同位置、同尺寸、背景色的三角（z-index: 10），否则边缘发虚
右气泡尾巴（mine）：
- 用
::after，border-color: transparent transparent transparent #007aff -
right: -12px，top: 6px - 同样需要两层伪元素，背景色三角压在边框三角上面
怎么防止长文本撑爆气泡或换行异常
max-width: 80% 是底线，绝不能写 width: 100% —— 它会让气泡强行占满父容器，移动端直接溢出。
换行逻辑要分语言：
- 英文/混合内容：优先用
word-wrap: break-word，保留单词完整性 - 纯中文/日文：可加
word-break: break-all强制断字，但慎用——可能把“中华人民共和国”切成“中华人/民共/和国” - 所有气泡必须加
box-sizing: border-box，否则 padding + border 会额外加宽
圆角也要差异化：.mine 去掉左上角（border-top-left-radius: 0），.theirs 去掉右上角（border-top-right-radius: 0），不然尾巴接不上。
为什么 scrollIntoView 滚不到底，或者 Safari 失效
根本原因：DOM 还没渲染完就调用了滚动方法。Vue 里直接在 sendMessage 函数末尾写 this.$refs.chatWindow.scrollTop = ... 是无效的。
正确做法：
- 必须包一层
this.$nextTick(() => { ... })，等 Vue 把新<div>插入 DOM 后再执行 - 确保聊天窗口有固定高度约束：
max-height: 500px+overflow-y: auto，否则scrollHeight在部分浏览器里返回 0 - Safari 16.4+ 对
scrollIntoView({ behavior: 'smooth' })支持仍不稳定，建议降级为手动计算：this.$refs.chatWindow.scrollTop = this.$refs.chatWindow.scrollHeight - this.$refs.chatWindow.clientHeight
尾巴位置、滚动时机、换行策略这三处最容易被忽略，改一处常连带崩两处——它们不是孤立样式，而是一整套布局契约。
