现代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”，而是从模型层面重新定义了布局：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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，结果不可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！