Float 不是布局工具，强行用它做页面布局如同给自行车加涡轮；其导致父容器高度塌陷因脱离文档流但仍影响文本；display: flow-root 是标准清除方案，但新布局应优先采用 Flexbox 实现可预测对齐与间距。
因为 Float 不是布局工具，它根本没打算干这活——强行用它做页面布局，等于天天给自行车加涡轮，修修补补不如换车。
Float 为什么会让父容器高度塌陷
float 元素会脱离文档流，但又不完全退出（仍影响邻近文本），导致父容器“看不见”子项。你看到背景色消失、footer 上移、border-bottom 不见，不是漏写样式，是浏览器按规范必须这么算。
- overflow: hidden 能撑开高度，但可能意外裁剪 position: absolute 的下拉菜单或阴影
- ::after { clear: both } 需要额外伪元素，若父容器设了 max-height，可能触发非预期滚动条
- display: flow-root 是标准清除方案，但它只该用于兜底老代码，新布局不该以“需要清浮动”为前提来设计
Flexbox 如何让对齐和间距变得可预测
float 的对齐靠“推挤”，flex 的对齐靠容器统一声明。你不用再算 width: calc(33.333% - 2px) 或写 :not(:last-child) 去删 margin。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- justify-content: space-between 替代“左 float + 右 float + 中间清空”的老套路，内容增减也不错位
- align-items: center 一行实现图文垂直居中，不用 line-height、transform 或负 margin
- gap: 8px 管理子项间距，比 margin-right 更干净，且不触发外边距合并
- flex-wrap: wrap 显式控制换行，小屏下不会莫名其妙掉行
迁移时最容易被忽略的冲突点
加了 display: flex 不代表万事大吉。浏览器遇到 float: left 和 display: flex 并存，会优先执行 float 规则，再套 flex 排列——结果不可控。
立即学习“前端免费学习笔记（深入）”；
- 必须显式重置子项：
float: none，尤其注意第三方组件（如老版弹窗）内部硬编码的float - JS 若依赖
getBoundingClientRect()或offsetLeft，这些值在 float 和 flex 下可能不同，需重新验证 -
gap在 iOS 14.5+ 才支持，旧版得回退到margin-right: 12px+:not(:last-child) - flex 容器里写
clear: both无效，写了也白写
真正难处理的不是“怎么清除浮动”，而是改一处样式，三处逻辑跟着崩——尤其是当 JS 隐式依赖浮动触发的 BFC，或第三方组件内部还卡着 float: left 时，浏览器会先执行 float，再套 flex，结果没法猜。
