float 仍是图文环绕排版的唯一自然解法，因其轻量、语义准确且浏览器原生支持；在IE8–9兼容场景及高度不一的横向卡片列表中，float 仍具不可替代性，但现代整体布局应交由 Flex/Grid。
图文环绕排版：float 仍是唯一自然解法
新闻页、博客正文里一张配图靠左，文字自动绕排右侧——这种需求至今没有比 float: left 更轻量、更语义准确的方案。Flex 或 Grid 无法让段落文本“智能避让”浮动元素，它们是容器级布局工具，不是行内流重排引擎。
- 图片加
float: left+margin-right: 12px，后续<p>标签无需任何样式，浏览器原生支持环绕 - 若某段想强制另起一行（比如摘要后跟作者信息），加
clear: both即可，精准控制断点 - 注意：
<img>必须有明确width和height（或aspect-ratio），否则加载中会引发布局抖动
IE8–IE9 兼容场景：别无选择，只能用 float
当项目仍需支持 IE8/9（如政企内网系统、老旧终端设备），display: flex 和 display: grid 完全不可用，此时多列布局只能回归 float + clearfix 组合。
- 三栏等宽卡片：每个卡片设
float: left; width: calc(100% / 3);（IE9+ 支持calc） - 避免 margin 超出 100%：用
padding代替外边距做间隔，或统一用box-sizing: border-box - 每行第三项后加
clear: right，或整个容器加.clearfix类（含::after伪元素清除）
高度不一的横向卡片列表：float 比 flex-wrap 更易对齐基线
当卡片内容动态（标题+描述+时间戳），每张高度不同，又要求“左对齐、换行时顶部平齐”，float 的行为反而比 flex-wrap 更可预测——它天然按顶边对齐，且不会因单张过高拉低整行。
- 所有卡片设
float: left; width: 33.333%;，父容器用overflow: hidden触发 BFC 撑高 -
flex-wrap在这类场景下容易出现“阶梯式错位”，尤其在字体渲染差异或缩放比例变化时 - 若需响应式断点，建议配合媒体查询改写为
width: 50%或100%，而非依赖 flex 的flex-basis计算
为什么现代项目不该再用 float 做整体结构？
浮动本质是“借位排版”：它不创建新的 formatting context，也不提供主轴/交叉轴控制，所有对齐、间距、顺序都靠手动推算尺寸和清除逻辑，极易断裂。
立即学习“前端免费学习笔记（深入）”；
- 父容器塌陷不是 bug，是设计使然——
float就是为脱离文档流而生，强行用clearfix是打补丁，不是正解 - 嵌套浮动时，
::after清除可能失效，因为清除只作用于当前 formatting context，而浮动容器本身不创建新 BFC - 一旦涉及 RTL（从右向左）布局、zoom 变化、高 DPI 屏幕或字体加载延迟，float 布局就容易出现像素级错位甚至整行换行
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* IE6–7 需额外加 *zoom: 1 */
.clearfix {
*zoom: 1;
}浮动没被淘汰，只是退回到它最初被设计的位置：处理图文混排和兼容性兜底。把它拽去干 Flex/Grid 的活，就像拿螺丝刀敲钉子——能用，但每次都会崩刃。
