浮动已非必要布局工具，仅适用于图文环绕、极老ie兼容或第三方富文本补救；现代开发应优先用flex/grid替代，其天然规避塌陷、清除等负担，且flex容器中float属性直接失效。
浮动还在用？先确认它是不是真必要
绝大多数所谓“复杂布局”，其实根本不需要 float —— 它不是为布局设计的，只是当年被借来凑合用。现在还写 float: left 做导航栏、三栏页、卡片流，等于主动给自己加清除逻辑、塌陷修复、换行错位这些负担。
真正该保留 float 的场景极少：
• 新闻正文里图片左浮、文字自然环绕（shape-outside 配合时更可控）
• 维护 IE8–9 的政企老系统（但 2026 年这类需求已趋近于零）
• 第三方富文本编辑器输出的 HTML，你没法改结构，只能靠 .clearfix 补救
Flexbox 替代 float：删代码比写代码更重要
迁移不是“加个 display: flex 就完事”，而是系统性清理：
• 删掉所有子元素上的 float、clear、靠 margin 模拟间距的 hack
• 删掉父容器上所有 overflow: hidden、::after.clearfix、zoom: 1 这类补丁
• 把对齐逻辑从“每个子项自己设”收归到容器统一控制
常见翻车点：
• 忘了加 flex-wrap: wrap，结果小屏下子项溢出容器，以为是“flex 不换行”
• 子项写了 width: 33.33% 还留 margin-right，和 flex: 1 冲突导致宽度计算错乱
• 图文混排时没调 align-items: flex-start，图片被拉伸、文字基线飘移
立即学习“前端免费学习笔记（深入）”；
Grid 更适合二维布局，别硬塞进一维场景
如果你在写“侧边栏 + 主内容 + 底部通栏”或“响应式卡片网格”，display: grid 不是“更好”，而是“唯一合理选择”。它不处理浮动，也不模拟浮动——它直接定义行列关系。
实用底线：
• 三列自适应网格？用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，别再写媒体查询堆砌 float 类
• 固定侧边栏？grid-template-areas 一行定义区域，HTML 结构完全不动
• 间距统一？用 gap，不是靠 margin 拼，避免外边距合并和清除逻辑
注意：gap 在旧版 Safari 有渲染 bug，但 flex-gap 更稳；所以按钮组、表单项这种一维排列，优先选 Flex，别为了“用 Grid”而用 Grid。
现代清除方案：flow-root 是最干净的替代
如果必须兼容老结构、又不能动 HTML，display: flow-root 是目前最轻量、无副作用的清除方式。它专为解决浮动塌陷而生，不裁剪阴影、不下拉菜单、不触发重绘异常。
对比其他方案：
• overflow: hidden 看似简单，但会裁剪 position: absolute 的提示框、box-shadow、transform 移出边界的动画
• ::after.clearfix 仍可用，但只推荐在无法升级结构的老项目中使用；新代码里写它，等于默认放弃语义化布局
• clear: both 本身不解决塌陷，它只是让某个元素“避开浮动”，对父容器高度毫无影响
最容易被忽略的一点：你在 display: flex 容器里还想着“怎么清浮动”，就像给电动车装化油器——根本不需要那个环节。浮动属性在 Flex/Grid 容器中会被直接忽略，它的存在本身就会干扰主轴/交叉轴计算，尤其在嵌套结构里，bug 往往藏得深、复现难。
