评论项必须用 display: flex 而不是 float，因 float 会导致父容器塌陷、嵌套错位及响应式失效；应设评论容器为 flex，头像固定尺寸+onerror兜底，主体用 flex:1，禁用 vertical-align，嵌套缩进用 ms-*，容器必加 flex-wrap: wrap 和 gap，并在 HTML 层用 width/height 和 onerror 兜底图片加载失败。
评论项必须用 display: flex 而不是 float
float 会让头像脱离文档流，导致父容器高度塌陷、嵌套回复错位、响应式失效。现代项目里还用 float 做评论行内对齐，基本等于主动放弃可维护性。
正确做法是把每条评论（<li> 或 <div class="comment">）设为 flex 容器：
-
display: flex+align-items: flex-start保证头像顶部对齐，避免文字换行后头像下移 - 头像用固定尺寸（如
width: 40px; height: 40px;），加onerror事件兜底防止加载失败拉伸布局 - 评论主体区域用
flex: 1占满剩余空间，不写死宽度，防长用户名撑破容器 - 禁止给头像加
vertical-align: middle——它和align-items冲突，会引发视觉偏移
嵌套回复靠 ms-* 缩进，别手写 margin-left
用 margin-left: 40px 这类硬编码值，在小屏上极易挤出横向滚动条，或让三级回复缩进过深看不见。
推荐用 CSS Logical Properties 的 ms-* 类（如 Bootstrap 提供的）：
立即学习“前端免费学习笔记（深入）”；
- 一级评论：默认无缩进（
ms-0） - 二级回复：加
ms-4（约margin-inline-start: 1.5rem） - 三级回复：用
ms-5（约2rem） - 超过三级：改用
ms-lg-5，小屏自动回落为ms-0，避免移动端错位
这样缩进值基于 rem，能随用户字体设置、深色模式、横屏等场景自适应，比像素值可靠得多。
flex-wrap: wrap 不是可选项，是评论列表的保命线
很多人只写 display: flex 就以为完事了，结果在手机上所有评论强行横排、文字折行错乱、甚至出现横向滚动条——根本原因是 Flex 默认 flex-wrap: nowrap。
评论列表容器（比如 <ul class="comments">）必须显式声明：
-
flex-wrap: wrap：允许换行，让单条评论自然堆叠 - 搭配
gap: 16px控制行/列间距，比用margin更干净（不用处理首尾外边距） - 若需兼容 iOS 14.5 以下 Safari，可用
margin-bottom替代gap，但要配合清除最后一行子项的margin-bottom
没加 flex-wrap: wrap 的评论容器，在窄屏下不是“变小”，而是“崩溃”。
图片加载失败时，HTML 层面必须兜底
头像挂掉后浏览器显示破损图标，宽高不定，会拉伸整个 flex 行，造成评论流抖动。这不是样式问题，是 HTML 没兜底。
必须同时做两件事：
- HTML 中给
<img>加width和height属性（如width="40" height="40"），锁定固有尺寸 - 加上
onerror="this.src='fallback-avatar.svg'"，确保加载失败时仍保持尺寸和布局节奏
只靠 CSS 设置 max-width 或 object-fit 无法阻止破损图标带来的 DOM 尺寸波动，兜底必须落在 HTML 层。
