现代CSS开发中应减少使用float，因其本为图文环绕设计而非布局工具；它导致父容器高度塌陷、无轴向概念、不响应空间变化，而Flexbox和Grid从模型层面解决了这些缺陷。
现代 CSS 开发中减少 float，不是因为它“坏了”，而是它根本没被设计来干布局的活——你拿它做大面积布局，就像用订书机拧螺丝：能转两下，但越拧越歪。
float 的设计目标和布局需求完全错位
float 的唯一正统用途是图文环绕：img { float: left; } 让段落文字自动绕排。它的行为逻辑是“脱离文档流但影响邻近行内内容”，这导致：
- 父容器无法感知浮动子项高度 → 背景色消失、
border-bottom不显示、footer上移，这不是漏写样式，是浏览器按规范必须这么算 - 没有主轴/交叉轴概念 → 垂直居中只能靠
margin负值、position: absolute或 JS 计算 - 不响应空间变化 → 小屏下
width: 50%+padding就可能超 100%，直接掉行；iOS “更大字体”开启后，文字撑开导致浮动项溢出
Flexbox 和 Grid 天然解决 float 的所有硬伤
它们不是“更好用的 float”，而是从模型层面重新定义了布局：
-
display: flex容器自动包裹子项高度，无需::after { clear: both }或overflow: hidden -
justify-content控制水平对齐，align-items控制垂直对齐，两行代码替代过去一堆定位 hack -
flex-wrap: wrap显式声明换行，浏览器按剩余空间自动分配宽度，不依赖百分比硬编码 -
display: grid一行grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))实现自适应列数，模块位置调整只需改grid-area，HTML 结构完全不动
混用 float 和 Flex/Grid 是最危险的误区
很多人迁移时只加了 display: flex 到父容器，却忘了删子元素的 float: left。这会触发不可预测的渲染冲突：
立即学习“前端免费学习笔记（深入）”；
- 浏览器规范明确要求：在
display: flex或display: grid的直接子元素上设置float，该属性**被忽略**；但若float写在子项内部（如.card > img { float: left; }），它只影响那个子项内部的文字流，父容器完全不感知 - 若外层是
flex，内层又嵌套了float + clear，而clear目标是另一个已脱离文档流的元素（比如position: absolute），那clear会彻底失效，且无任何报错提示 - JS 若读取了
getBoundingClientRect()或offsetLeft，这些值在float下和flex下可能不同，需重新验证
什么场景下仍需保留 float
目前真正需要 float 的场景极少，且基本与“布局”无关：
- CMS 输出的正文图片环绕（
img { float: left; }），这是语义所需，且纯 CSS、零兼容性风险 - 邮件模板（Outlook 等客户端对
flex/grid支持极差，float是目前唯一稳定实现多栏排版的方式） - 极旧环境兼容（IE8/9），但这类项目通常受限于整体技术栈，不会靠重写
float来延寿
真正难处理的不是“怎么清除浮动”，而是改一处样式，三处逻辑跟着崩——尤其是当 JS 隐式依赖浮动触发的 BFC，或第三方组件内部硬编码了 float: left 时，浏览器会优先执行 float，再套 flex，结果不可控。
