优先用display: flow-root替代空clear标签，因其专为创建BFC设计，语义清晰、无裁剪副作用、不增DOM；但需避开表格元素、检查JS依赖及溢出场景。
直接删掉所有 <div class="clear"></div>、<div style="clear:both"></div> 这类空标签，然后用 display: flow-root 替代——这是最安全、零副作用的替换方案。
为什么不能只靠 clear: both 标签
这类空标签本身不参与语义表达，纯属“补丁式”写法。它们会干扰可访问性（屏幕阅读器可能误读）、增加 DOM 节点数、拖慢渲染，并且一旦漏加或加错位置，父容器高度立刻塌陷。更麻烦的是，现代 CSS 工具链（如 PostCSS、CSS-in-JS）往往无法自动识别并优化这些无意义节点。
- 它不解决根本问题：只是把塌陷“推后”到下一个元素，父容器自身依然不知道子元素高度
- 响应式场景下极易失效：比如浮动元素在小屏变为块级堆叠，
clear标签反而制造多余空白 - 与 Flex/Grid 混用时行为不可控：某些浏览器中
clear在 flex 容器内被忽略
display: flow-root 是什么，为什么推荐
它是一个专门用于创建 BFC（块级格式化上下文）的 display 值，效果等同于老式 overflow: hidden，但语义清晰、无副作用。浏览器会把它当作一个独立的布局容器，自动包含内部浮动子元素的高度。
- 无需额外 HTML：直接加在原父容器上，比如
.container { display: flow-root; } - 兼容性足够好：Chrome 64+、Firefox 57+、Safari 12.1+、Edge 79+ 都支持；IE 不支持，但 IE 已退出主流支持周期
- 不影响溢出行为：不像
overflow: hidden会裁剪内容或意外触发滚动条
替换时要注意的三个实际细节
不是所有“清除浮动”的地方都适合一刀切换成 flow-root，得看上下文：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器本身设置了
overflow: visible且依赖内容溢出（比如下拉菜单、tooltip），换flow-root后需额外确认定位逻辑是否仍成立 - 若父容器是表格相关元素（
<table>, <code><td>），<code>display: flow-root会破坏表格布局，此时应改用display: flex或重构为语义化结构 - 存在 JS 动态读取父容器
offsetHeight的旧代码，替换后高度值会变（从 0 → 实际高度），需同步检查相关逻辑是否假设了“塌陷高度”
真正麻烦的从来不是怎么删标签，而是删完之后没人再检查那个父容器有没有被其他地方的 JS 或 CSS 隐式依赖了“塌陷状态”。动手前先全局搜 clear 和 clearfix，再逐个验证渲染结果，比写十行新 CSS 都重要。
