float在图文混排、去空格布局及ie9–兼容场景下仍不可替代：它天然支持文字流环绕、轻量并列无间隙、且是旧浏览器唯一稳定方案，但必须配套清除浮动逻辑。
它在特定场景下仍不可替代，尤其当你要兼容 IE9– 或处理图文混排这类“非布局本意但实际高频”的需求时。
float 在图文混排中仍是最佳实践
现代布局方案（flex、grid）无法天然复现文字环绕浮动图片的效果——它们把容器当整体排列，不支持“文字流主动绕开某一块”的语义。而 float 从设计之初就是为这个目的服务的。
- 给
<img>加float: left+ 合适的margin，正文段落会自动贴边环绕，无需 JS 计算或额外 wrapper -
display: inline-block或flex都会让图片成为行内“刚性块”，文字只能在上下或两侧硬分，无法形成自然流式环绕 - 注意：必须配合
shape-outside（仅现代浏览器）才能做非矩形环绕，否则float仍是唯一可靠选择
float 是最轻量的“去空格”手段
当你有一组 <button></button>、<span></span> 或 <li> 需要水平并列且中间不能有空隙（比如导航栏），float 比 flex 更直接、更少副作用。
-
font-size: 0on parent + reset on children 容易误伤文本内容 -
letter-spacing: -0.3em对齐不可靠，且影响可访问性 -
float: left不改变元素语义，也不触发新格式化上下文，只要父容器清除得当，就只是“挤在一起”而已
IE9– 兼容场景下没有替代品
如果你的项目仍需支持 IE9 或 IE10（比如政企内网系统），flex 的兼容性补丁（display: -ms-flexbox）行为不一致，grid 完全不可用，此时 float 是唯一稳定可控的横向排列方式。
- 注意：IE 下
clear: both必须写在浮动元素之后的兄弟元素上，伪元素::after在 IE8– 不生效 -
overflow: hidden触发 BFC 在 IE7+ 可用，但会裁剪position: absolute子元素的box-shadow或transform溢出部分 - 真正稳妥的做法是：在浮动列表末尾加一个
<div style="clear:both"></div>，简单粗暴，零兼容风险
真正容易被忽略的不是“要不要用 float”，而是它一旦启用，就必须配套处理清除逻辑——哪怕只浮动一个元素，只要它后面还有标准流内容，就可能引发错位；而这个清除动作，在现代 CSS 中常常被当成“古董技巧”跳过，结果在旧环境里突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
