重置CSS比局部修复更可靠，因浮动仅放大浏览器默认样式差异；需全局设置box-sizing: border-box、清除margin/padding、统一font-size/line-height/vertical-align等，并验证各嵌套层级Computed值。
浮动元素在不同浏览器下出现1px错位、换行或边缘空隙，不是浏览器bug，而是默认样式未归一导致的盒模型计算差异——box-sizing、margin、padding、font-size这些基础值在各浏览器中本就不一致，浮动只是把偏差放大了。
为什么重置CSS比局部修复更可靠
只给浮动项加box-sizing: border-box或clear: both，解决不了父容器margin被继承、子元素font-size浮动、line-height渲染不一致等问题。这些值叠加后，在临界宽度下哪怕差0.5px，Chrome四舍五入为100px，Firefox算成99px，就足以让整行换行。
- normalize.css 会重置
button、input等表单控件的margin和vertical-align，而这些元素常嵌在浮动项里 - 某些框架（如Bootstrap）的
.row自带负margin，若没被重置覆盖，会和你写的浮动width冲突 -
* { box-sizing: border-box; }必须放在所有样式之前，否则被第三方CSS覆盖后，Computed面板里能看到它被划掉
重置时必须显式覆盖的关键属性
不要依赖reset.css全量清空——它可能干掉svg的默认vertical-align或img的max-width。只锁定浮动布局真正敏感的几项：
-
*, *::before, *::after { box-sizing: border-box; }—— 确保伪元素也参与尺寸计算，避免::after清除浮动时高度异常 -
body { margin: 0; line-height: 1.5; font-size: 16px; }——line-height影响内联元素基线，font-size影响em单位浮动项宽度 -
ul, ol, dl, p, blockquote, pre { margin: 0; }—— 防止浮动容器里意外塞进一个p，带出默认margin-top撑高父容器 -
img, video, canvas, svg { vertical-align: top; }—— 消除图片浮动后底部空白，IE和Safari对此处理尤其不一致
重置后仍错位？检查这三个隐藏干扰源
重置完再出问题，大概率是以下三者之一在捣鬼：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
padding但子浮动项width没补偿：比如父级padding: 12px，子项写width: 50%，实际可用宽度只剩calc(100% - 24px)，必须用width: calc(50% - 12px) - 字体栈里混入系统字体（如
system-ui），macOS 和 Windows 渲染同一段文字宽度差1–2px，导致float: left项总宽偶然超限 - 第三方脚本动态插入
style标签，覆盖了你的重置规则；可在DevTools的Computed面板里点开box-sizing，看“来源”是否来自你预期的CSS文件
真正麻烦的不是重置本身，而是重置之后还要验证所有嵌套层级——浮动项里的按钮、图标、文字容器，只要有一个漏掉border-box或继承了异常margin，偏差就会从那个点开始传导。别信“重置完就稳了”，得挨个打开开发者工具看Computed值。
