float 在图文混排文字绕图、ie8–ie11 兼容布局、纯 css 瀑布流及轻量横向菜单四类场景中仍不可替代，因其原生流式环绕、稳定兼容性与零 js 特性，但需规避脱离文档流、清除不当等常见陷阱。
图文混排时让文字自动绕图
这是 float 唯一不可被 Flexbox 或 Grid 完全替代的原生场景。浏览器对 float 的文字环绕行为（行框自动缩短、文本流绕开）是深度内建的，而 display: flow-root 或 shape-outside 无法复现这种自然、无 JS 干预的流式环绕。
常见错误是给图片加 float: left 后发现文字没绕、或段落首行缩进异常——本质原因是父容器未触发 BFC，或段落本身设置了 display: flex 等脱离流式布局的属性。
- 必须确保文字容器是标准流中的块级元素（如
p、div），且未设display: flex/grid/inline-block - 图片需显式设置
width和margin（如margin-right: 12px），否则文字会紧贴边缘 - 避免在浮动图片外层套
display: inline-flex容器，它会切断行框感知能力
兼容 IE8–IE11 的老项目维护
当项目仍需支持 IE8–IE11，且已用 float 实现两栏/三栏布局时，强行改用 Flexbox 会引入大量 fallback 代码和测试成本。float 在这些浏览器中行为稳定，只要宽度计算准确、清除得当，就能可靠运行。
典型陷阱是使用百分比宽度 + box-sizing: border-box 时漏掉 padding 和 border 的占用，导致最后一列换行。例如：width: 33.33% 的三列，在 IE 中因四舍五入误差常塌成两行。
- 推荐用整数百分比（如
width: 33%）+ 预留 1% 间隙，或改用固定像素宽度 - 清除浮动必须用
::after伪元素法，IE8 支持:after但不支持::after双冒号写法 - 避免在浮动元素上同时用
position: relative和z-index，IE 下可能引发层叠错乱
纯 CSS 瀑布流（无 JS 依赖）
在极简需求下（如静态博客的相册页），可用多列 float: left + 固定高度实现“伪瀑布流”。虽不如 Masonry 精准，但零 JS、零额外依赖，适合内容高度差异小的场景。
关键限制在于：所有子项必须有明确 height 或可预测的高度，否则会出现“卡住”现象——后一个浮动元素被前一个较高元素挡住，无法向下填充空隙。
- 每列宽度用
width: calc(33.333% - 2px)配合margin控制间隙 - 父容器必须设
font-size: 0消除 inline 元素默认间距，否则列间出现意外空隙 - 不适用于动态加载或高度波动大的卡片（如含异步图片的列表）
导航菜单横向排列（无 Flex 兼容要求）
当项目无需响应式、且目标浏览器支持 float 时，nav ul li { float: left } 仍是最快最轻量的横向菜单方案。比 Flexbox 少 2–3 行声明，渲染路径更短。
问题多出在 li 内部链接未设 display: block，导致点击区域仅限文字，或 hover 效果失效。
- 必须给
a加display: block和padding，否则交互区域过小 - 清除浮动要作用在
ul上，而非nav—— 否则可能影响后续兄弟元素布局 - 慎用
white-space: nowrap强制单行，它会破坏移动端适配，且与float协同时易触发溢出隐藏
真正需要警惕的是把 float 当“万能布局工具”：它不解决垂直居中、等高列、响应式断点重排——这些地方硬用只会堆砌 hack，最终比直接切到 Flexbox 多花三倍时间调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
