display: flow-root是当前最直接、副作用最少的清除浮动方案，它通过显式创建bfc使父容器重新纳入浮动子元素布局边界，不裁剪内容、不干扰定位；但在display: flex/grid/inline-block、ie11、contain: layout/paint或js依赖offsetheight等场景下会失效。
因为浮动布局把布局责任分散到每个子元素上，而企业级框架需要的是可预测、可组合、可继承的容器级控制能力——浮动天然做不到。
浮动让父容器“看不见”子元素高度
设置 float: left 后，子元素脱离文档流，父容器的 height 自动坍缩为 0。这不是 bug，是 CSS 规范明确行为。企业级框架里，一个卡片组件、表格行、侧边栏容器，如果都得手动加 display: flow-root 或伪元素清除，等于每层嵌套都要重复判断和补救。
- 用
overflow: hidden清除？会意外裁剪position: absolute的下拉菜单或 tooltip - 用
::after清除？漏写一个类名，整个区块背景色就消失，线上排查难定位 - 用
display: flow-root？IE11 不支持，而政企系统仍大量依赖 IE 兼容模式
响应式断点切换时，浮动逻辑必须重写一遍
PC 端两栏靠 float: left 并排，移动端要堆叠，不能只改 float: none ——你还得同步处理：clear 是否残留、margin 是否在小屏下堆叠、父容器是否因清除失效而塌陷。
- 媒体查询里没重置
clear: both？小屏下内容强制换行，视觉流断裂 - 没重设
width和box-sizing？百分比宽度叠加 padding 后超 100%，直接溢出容器 - 用了
flex容器包裹浮动子项？float被静默忽略，clear失效，控制台不报错，调试靠猜
组件复用时，浮动强耦合 DOM 顺序和父容器状态
一个封装好的 .card 组件，内部用了 float: left 和 clear: both，它就只能在非 flex 的父容器里工作。一旦嵌入到 display: grid 的仪表盘布局中，要么失效，要么需要额外 wrapper 层兜底。
- 右浮动侧边栏必须写在 HTML 前面，否则渲染掉行——组件无法自由插入 DOM 任意位置
- 子组件内浮动 + 外层 flex 共存？浏览器按规范忽略
float，但开发者仍习惯性加clear，徒增冗余代码 - 等高列需求靠 JS 或 hack 实现，而企业级表格、表单、数据看板，90% 场景要求列高自动对齐
真正麻烦的不是写不出清除代码，而是每次新增模块、重构页面、升级框架版本时，你都得重新确认：这个容器是否还在被浮动影响？它的清除方式是否被上层 layout 静默接管？有没有某个 float 正在悄悄破坏无障碍阅读顺序？这些隐性判断成本，远高于一开始就用 display: flex 或 display: grid 定义容器行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
