评论列表塌陷是因浮动布局未触发bfc致父容器高度坍缩；推荐用.comment-list::after{content:"";display:table;clear:both}清除，或直接采用flex布局替代float。
为什么评论列表会塌陷？
因为评论项用了 float: left 或 float: right 布局（比如头像左浮、内容右排），父容器没触发 BFC，高度坍缩为 0，导致后续元素上移、背景/边框消失、点击区域错位。
clear: both 不是万能解法
在最后一个评论项后面加 <div style="clear:both"></div> 能“撑开”父容器，但问题不少：
- 污染 HTML 结构，语义不清
- 如果评论动态加载（如无限滚动），每次都要手动插入清空元素
- 多个浮动方向混用时，
clear: both可能误触发额外空白
推荐用 ::after 伪元素触发 BFC
给评论列表容器（如 .comment-list）加这段 CSS，干净、可复用、支持 JS 动态增删评论：
.comment-list::after {
content: "";
display: table;
clear: both;
}
关键点：
-
display: table触发块级格式化上下文（BFC），让容器包含所有浮动子元素 - 不用
display: block+clear: both，否则可能因 margin 折叠产生意外间距 - 若项目需兼容 IE6–7，改用
zoom: 1（仅 IE 支持）配合*height: 0防止高度异常
现代项目优先用 flex 或 grid 替代 float
浮动本就不是为布局设计的，评论列表这种线性结构更该用语义清晰的方案：
- 用
display: flex+flex-direction: column，天然不塌陷，且支持对齐、间距控制 - 若需头像左/文字右的内联效果，直接对单条评论设
display: flex，无需浮动 - 注意：IE10+ 支持 flex，但老版本 flex 属性名带前缀（如
-ms-flex），可用 Autoprefixer 自动处理
真正容易被忽略的是：很多团队还在用 float 写新评论组件，只因旧代码这么写——但只要父容器加了 ::after 清除，又没改 DOM 结构，迁移成本其实很低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
