应优先使用 flex 布局替代 float 实现头像与评论并排，因其天然避免塌陷、支持垂直居中、响应式灵活；仅当需兼容 IE9 及更早版本时才考虑 float 配合 BFC 或清除浮动。
直接用 float 做头像+评论并排，容易塌陷、换行错乱、响应式失效——这不是写法不对，而是没处理好浮动的副作用和现代容器约束。
为什么 float: left 头像后文字不贴边？
常见现象是头像左浮动了，但 <p></p> 或 <div class="comment"> 仍从下一行开始，或顶部对不齐。原因通常是：<ul>
<li>
<code><img alt="怎样用CSS优雅处理头像浮动与评论内容并排展示？" > 和后续文本不在同一文档流层级（比如文本被包裹在块级容器里且未触发 BFC）
vertical-align，而父容器是 line-height 驱动的行内上下文display: block，无视浮动元素的“环绕”意图解决办法：让评论内容区域变成行内块或触发 BFC，同时控制对齐基准。例如：
.avatar {
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
}
.comment-content {
overflow: hidden; /* 触发 BFC，使内容环绕 float 元素 */
padding-left: 12px; /* 避免文字紧贴头像 */
line-height: 1.4;
}如何避免父容器高度塌陷？
当整个评论项（头像 + 文字）被包在一个 <div class="comment-item"> 里时，只给子元素设 <code>float，父容器会“看不见”子元素高度，导致后续内容上移、边框不包住内容。
立即学习“前端免费学习笔记（深入）”；
必须清除浮动，但别用过时的 <div style="clear:both">。推荐以下任一方式：<ul>
<li>给父容器加 <code>overflow: hidden 或 overflow: auto（简单有效，但慎用于有下拉/弹层的场景）
.comment-item::after { content: ""; display: table; clear: both; }
.comment-item 改为 display: flex，头像和文字作为 flex 项目——此时根本不用 float
移动端适配时 float 为什么突然错行？
小屏下图片宽度未响应式收缩，或容器宽度不够容纳 float: left 的头像 + 文字最小宽度，就会强制换行。这不是 bug，是 float 的固有行为。
关键控制点：
- 头像用
max-width: 100%+height: auto保证缩放比例 - 避免固定像素宽高，改用
rem或视口单位（如width: 2.5rem） - 文字容器加
min-width: 0，防止 flex 或 BFC 容器中长单词撑破布局 - 真要兼容老系统（IE10–），可加媒体查询降级：
@media (max-width: 480px) { .avatar { float: none; margin-bottom: 8px; } }
什么时候该放弃 float 改用 flex？
只要你的目标浏览器支持 Flexbox（Chrome 29+/Firefox 28+/Safari 6.1+/Edge 12+），且不需要支持 IE9 及更早版本，float 就不是首选。
用 display: flex 替代的收益很实在：
- 无需清除浮动、无塌陷风险
- 天然垂直居中（
align-items: center） - 文字自动换行不破坏布局（
flex-wrap: wrap可控） - 响应式切换列方向更直观（
flex-direction: column）
示例：
.comment-item {
display: flex;
align-items: flex-start; /* 避免文字基线对齐导致头像“上浮” */
gap: 12px;
}
.avatar {
flex: 0 0 40px; /* 不伸缩、不压缩、固定宽 */
border-radius: 50%;
}
.comment-content {
flex: 1; /* 自动填满剩余空间 */
}真正难的不是选 float 还是 flex，而是判断当前项目是否还被旧版浏览器绑架；一旦解绑，float 在图文并排这类场景里，基本只剩维护存量代码的价值了。
