根本原因是清除浮动依赖的底层计算环境（盒模型、字体渲染、BFC触发方式）存在跨内核差异；必须全局设*, *::before, *::after { box-sizing: border-box; }并置顶，重置font-size/line-height/vertical-align，慎用float而优先采用flex/grid。
清除浮动本身在不同浏览器内核中渲染效果不同，根本不是 clear 属性实现不一致，而是它依赖的底层计算环境（盒模型、字体渲染、BFC 触发方式）存在跨内核差异——clear 只是“最后一根稻草”，真正出问题的是前面几十行没控住的默认值。
box-sizing 漏设一个伪元素，就足以让 Chrome 和 Firefox 渲染差 1px
很多人只给浮动项加 box-sizing: border-box，却忘了 ::after 伪元素也参与尺寸计算。如果 .clearfix::after 的 box-sizing 是默认的 content-box，它带 padding: 0 和 border: 0 看似无害，但在某些 Safari 版本里，display: table + content-box 组合会悄悄引入 0.5px 的 subpixel 偏移，导致父容器高度计算偏差。
- 必须写
*, *::before, *::after { box-sizing: border-box; }，且这条规则要放在所有 CSS 文件最顶部 - 检查第三方库（如 Bootstrap 或 normalize.css）是否覆盖了该规则；在 DevTools 的 Computed 面板里点开
box-sizing，确认“来源”是你写的那条 - 旧版 Android WebView（4.1–4.3）甚至会忽略
*::after的box-sizing，此时需额外给.clearfix::after显式声明
display: flow-root 在 Safari 15.4+ 才真正可靠，旧版仍走 BFC 降级路径
display: flow-root 是现代清除浮动最干净的方式，但它在 Safari 15.3 及更早版本中存在 BFC 边界判定缺陷：当父容器同时有 transform 或 will-change 时，浮动子元素的高度可能被错误截断，表现和 overflow: hidden 一样不可靠。
- Chrome 64+、Firefox 59+、Edge 16+ 支持良好；Safari 需 ≥15.4
- 若目标环境含 Safari ≤15.3，不要单独依赖
flow-root，应搭配 fallback：.clearfix { display: flow-root; } .clearfix { *zoom: 1; } /* IE */ .clearfix::after { content: ""; display: table; clear: both; } - 避免与
transform共存——哪怕只是transform: translateZ(0)，也会在旧 Safari 中触发渲染管线退化
clear: both 写在浮动元素自身上完全无效，但老版本 IE 会“误判生效”
把 clear: both 加在浮动子元素上（比如 <div class="item" style="float:left; clear:both"></div>），在标准浏览器中毫无作用：因为 clear 只对文档流内的块级兄弟元素生效，而浮动元素自己已脱离文档流。但 IE6/7 的 hasLayout 机制会把它当作“强制重排锚点”，偶然撑开父容器——这造成一种假象：“我在 Chrome 里失效，在 IE 里反而好使”，实则是两个引擎在用不同逻辑处理错误写法。
立即学习“前端免费学习笔记（深入）”；
- 真正起效的位置，必须是浮动流结束后的第一个非浮动、块级、文档流内元素
- 调试时可临时加
background: red和border: 1px solid到待清除元素，确认它是否真实渲染且未被display: none或其他样式压制 - 如果父容器用了
display: flex或grid，子元素即使写了float也基本被忽略，此时clear自然无意义，应直接删掉
字体栈和 line-height 微差会放大浮动布局的临界错位
浮动常与文字、图片混排，而 font-size、line-height、vertical-align 的默认值在 Safari、Chrome、Firefox 中并不一致。例如 line-height: normal 在 macOS 上可能算出 19.2px，在 Windows 上是 18.7px；这个差值乘以多个浮动项，就足以让总宽度在某一行超限换行。
- 全局重置：
body { font-size: 16px; line-height: 1.5; } - 图片一律加：
img { vertical-align: top; }，别依赖默认baseline - 慎用
system-ui字体栈——同一段文字宽度跨平台可差 1.2px，浮动并排时极易临界溢出
真正麻烦的不是选哪个清除方法，而是浮动布局中每一层嵌套都可能引入新的尺寸变量：从伪元素到 SVG 图标，只要有一个没被 border-box 覆盖，或某处 line-height 没归一，就可能成为压垮跨浏览器一致性的最后一像素。
