display: flow-root 是解决浮动塌陷的首选方案，它一行声明即可创建无副作用的bfc，现代浏览器全面支持；ie11需降级用伪元素clearfix；避免滥用overflow:hidden和clear:both，flex/grid下float无效。
直接用 display: flow-root 就能撑开父容器，不需要写一堆伪元素或 hack；但前提是你的后台管理系统不需支持 IE11 以下版本。
为什么 display: flow-root 是首选方案
它专为解决浮动导致的父容器高度塌陷而设计，一行声明即可创建 BFC，且无副作用：不会裁剪 box-shadow、不会隐藏 position: absolute 下拉菜单、也不会意外触发滚动条。
-
display: flow-root在 Chrome 64+ / Firefox 58+ / Safari 15.4+ 全面支持，覆盖所有现代桌面及移动端浏览器 - 老项目若仍需兼容 IE11，可降级使用伪元素
.clearfix::after，但必须确保content: ""和display: table（或block）同时存在，否则无效 - 避免对后台管理系统的主容器（如
.main-layout或.sidebar-wrapper）盲目加overflow: hidden——一旦弹出层、Tooltip 或全屏 Modal 出现在其内部，就会被截断
clear: both 失效时怎么快速定位问题
写了 clear: both 却没起作用？大概率不是清除逻辑错了，而是它根本没生效。
-
clear只对**紧邻的前一个浮动兄弟元素**生效，如果中间隔着display: none元素、visibility: hidden元素，或该元素自身也设置了float，那它就“看不见”前面的浮动 - 后台系统中常见场景：侧边栏菜单项用
float: left实现图标+文字并排，但某个菜单项被 JS 动态隐藏（display: none），导致后续项的clear: both失效 - 调试建议：临时给待清除元素加
background: #ff0和border: 1px solid red，确认它是否真实渲染、是否在 DOM 中可见、是否被其他样式压制
Flex/Grid 布局下还写 float 是自找麻烦
如果你的后台管理系统已采用 display: flex 或 display: grid 构建主框架（比如顶部导航栏 + 左侧菜单 + 内容区三栏布局），那么子元素上的 float: left 或 float: right 实际上已被忽略——CSS 规范明确要求 Flex/Grid 容器内浮动属性无效。
- 现象：代码里同时出现
display: flex和float: left，但视觉上看似正常，其实是 Flex 自身排列在起作用，float纯属冗余 - 风险：当某天你删掉
display: flex调试响应式断点时，float突然生效，导致整个面板错位，排查成本远高于初期清理 - 替换建议：用
margin-left: auto推右操作按钮，用flex-wrap: wrap+flex-basis控制表单项换行，比靠float拼宽度更稳定
真正容易被忽略的是：后台系统常需动态插入内容（如日志列表、实时通知卡片），这些区域若沿用老式浮动结构，又没统一应用 flow-root 或 clearfix，就会在某次 JS 渲染后突然塌陷——此时不是缓存问题，也不是 JS 错误，只是浮动没被清除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
