浮动布局虽被flex和grid取代，但在图文环绕、简易导航、表单内联等轻量场景中仍具实用价值，尤其兼容旧浏览器且代码简洁。
浮动布局（float）在现代 CSS 布局中虽已被 flexbox 和 grid 取代，但在特定轻量场景下仍有实用价值，尤其适合无需复杂响应式、结构简单、兼容性要求高的小范围排版。
图文环绕排版
这是 float 最经典且至今仍合理使用的场景。当文字需要自然绕行图片（如新闻、博客正文中的插图），用 float: left 或 float: right 配合 margin 即可快速实现，语义清晰、代码简洁、浏览器兼容性极佳。
- 图片加
float: left; margin-right: 12px;，文字自动环绕右侧 - 避免对父容器设
overflow: hidden等清除浮动副作用，推荐用::after伪元素清除（更可控） - 注意设置图片
max-width: 100%，保证在小屏下不溢出
多栏简易导航或标签组
在老项目维护或需支持 IE8–9 的环境中，用 float 实现横向排列的导航菜单、分类标签、工具按钮组等，比 inline-block 更易控制垂直对齐和间距。
- 给每个
<li>或<span>设float: left，再统一设margin控制间隔 - 父容器必须清除浮动（否则高度塌陷），可用
overflow: auto或伪元素法 - 不建议用于响应式切换列数，此时应优先选
flex-wrap
表单内联元素对齐（如 label + input）
在简单表单中，让标签与输入框同行显示（如“姓名：[输入框]”），float 仍是一种低侵入、易调试的方案，尤其当不希望引入 flex 或改变 HTML 结构时。
立即学习“前端免费学习笔记（深入）”；
-
label左浮动 + 固定宽度，input自然流式跟随 - 注意为
input设置box-sizing: border-box，避免宽度计算偏差 - 移动端需配合媒体查询取消浮动，改用块级显示，确保可操作性
不复杂但容易忽略：浮动本身不脱离文档流，但会干扰后续兄弟元素的布局；只要明确其行为边界、控制好清除时机，并限制使用范围，float 仍是可靠的小工具。
