现代CSS布局仍需float，因其是唯一原生可靠实现文字环绕图片的属性；它在简单多列布局中轻量实用，但需正确清除浮动，且应归位至原始设计场景而非强行用于复杂布局。
现代CSS布局仍然需要 float，不是因为它适合做复杂布局，而是因为它是唯一能原生、可靠实现「文字环绕图片」效果的属性——flex 和 grid 都做不到这一点。
文字环绕图片只能靠 float
当你把一张图嵌在段落中间，希望文字从图的左侧或右侧自然流过（像报纸排版那样），float: left 或 float: right 是目前唯一被所有主流浏览器稳定支持、无需额外 JS、不破坏语义结构的方案。
-
display: inline-block会让图片变成行内块，但文字不会“绕”它，只是挤在同一行末尾换行 -
position: absolute会完全脱离流，文字无视它的存在，必须手动计算边距和行高，响应式下极易错位 -
shape-outside虽然能实现不规则环绕，但兼容性差（Safari 支持弱）、对图片尺寸敏感，且仍需配合float才生效
float:left/right 在简单多列中仍有实操价值
当你要快速并排两个宽度明确的块（比如左导航栏 + 右主内容），且不需要垂直居中、等高、响应式重排时，float: left 比写 display: flex 更轻量——尤其在旧项目维护、CMS 输出模板或邮件 HTML 中。
- 不用考虑
flex-wrap、align-items等冗余配置 - IE10+ 全面支持，而某些邮件客户端（如 Outlook）对
flex的支持仍残缺 - 注意：必须处理父容器高度塌陷，否则后续元素会上移——这不是 bug，是
float的固有行为
清除浮动的三种常用方式及选择依据
父容器高度塌陷不是错误，是 float 脱离文档流后的必然结果。清除方式选错，反而引发新问题：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden最简，但会裁剪溢出内容（比如下拉菜单、阴影、动画位移） -
clear: both需额外 DOM 元素（如<div style="clear:both"></div>），增加无意义标签 -
::after伪元素法（.clearfix::after { content:""; display:table; clear:both; }）最干净，但要求父元素不能是display: inline或table-cell
真正容易被忽略的点是：float 不是“过时”，而是“归位”——它回到了最初设计的场景里。一旦你试图用它做三栏自适应、垂直居中或响应式断点重排，问题就不是兼容性，而是逻辑本身在对抗 CSS 流式本质。这时候，该切 flex 就切，别硬扛。
