现代前端开发建议用 display: flex 替代 float 排版，因 float 本非为布局设计；flex 容器天然触发 BFC，无需清除浮动，且支持垂直居中、均分空间、间隙控制等原生能力。
现代前端开发建议用 display: flex 替代 float 排版，不是因为 float “坏了”，而是它根本没被设计来干这件事——就像用螺丝刀拧灯泡，能转，但不该这么用。
父容器高度塌陷是 float 的必然行为，不是 bug
float 元素脱离文档流，但又不完全退出（仍影响邻近文本），导致父容器无法计算其高度。你看到背景色消失、border-bottom 断裂、footer 上移，都是规范要求的结果，不是漏写样式。
-
overflow: hidden能撑高，但可能意外裁剪position: absolute的下拉菜单或阴影 -
::after { clear: both }需搭配display: table才生效，否则清除无效 -
display: flow-root是标准清除方案，但它只是兜底，不该成为新布局的设计前提
Flex 容器天然触发 BFC，无需“补丁式”清除
display: flex 容器默认建立块级格式化上下文（BFC），子项无论是否换行、对齐、伸缩，都会被父容器感知并包裹。不用任何 hack，height: auto 就能正确撑开。
-
align-items: center一行实现图文垂直居中，不用line-height、transform或负margin -
flex: 1自动均分剩余空间，不用width: calc(33.333% - 2px)算来算去 -
gap: 8px管理子项间距，比margin-right更干净，且不触发外边距合并
混用 float 和 flex 是真实项目中最常踩的坑
老项目迁移时，常有人给容器加了 display: flex，但子项还留着 float: left。浏览器会先执行 float 规则，再套 flex 排列——结果不可控：部分子项错位、压缩、不参与伸缩。
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
- 必须显式重置子项：
.container > * { float: none; }，尤其注意第三方组件内部硬编码的float -
flex-wrap: wrap必须显式声明，否则子项宁可横向溢出也不换行 - 内部有长文本或图片时，记得给子项加
min-width: 0，否则 flex 会拒绝收缩，撑爆容器
真正难的不是“怎么写 flex”，而是判断哪块该切、哪块该留
不是所有 float 都该删。真正该保留的，是它原本就擅长的场景：
- 新闻正文里图片左浮、文字自然绕排——
float: left配合shape-outside是目前唯一原生支持非矩形环绕的方案 - 邮件模板（HTML email）：Outlook Desktop 等客户端基本不认
display: flex，float + table仍是事实标准 - 接手满屏
.clearfix的老系统，上线时间紧？局部不动比全局重构更稳
迁移时最容易被忽略的，是 JS 隐式依赖：比如靠 getBoundingClientRect() 读取浮动后位置做判断，或靠 float 脱离文档流辅助绝对定位——这些逻辑在 flex 下坐标和流态都变了，必须重测重写。
