浮动错位非浏览器bug，而是box-sizing、margin、font-size、line-height等默认样式未归一导致；需优先应用三条重置规则：*{box-sizing:border-box}、body{margin:0;line-height:1.5;font-size:16px}、img等元素vertical-align:top。
为什么浮动在不同浏览器里会错位1px或换行
不是浏览器bug，是默认样式没归一——box-sizing、margin、font-size、line-height这些基础值在Chrome、Firefox、Safari里本来就不一致，浮动只是把微小差异放大了。比如Chrome把font-size: 14px下的em单位算成100.2px，Firefox四舍五入为100px，临界宽度下就差出一行。
必须写在最前面的三条重置规则
* { box-sizing: border-box; }必须放在所有CSS之前，否则被第三方库覆盖后，在DevTools的Computed面板里能看到它被划掉；body { margin: 0; line-height: 1.5; font-size: 16px; }统一基线和缩放基准；img, video, canvas, svg { vertical-align: top; }解决图片浮动后底部空白——IE和Safari对此处理尤其不一致。
- 伪元素也要参与盒模型：
*::before, *::after { box-sizing: border-box; }，否则::after清除浮动时高度异常 - 列表和段落默认外边距必须清零：
ul, ol, p, blockquote, pre { margin: 0; }，不然一个意外的<p></p>就能撑高父容器 - 别用
reset.css全量清零——它会干掉svg的默认vertical-align或img的max-width，反而引发新问题
浮动布局里最容易被忽略的三个干扰源
重置完还错位？大概率是这三者之一在捣鬼：
- 父容器用了
padding但子项width没补偿：比如父级padding: 12px，子项写width: 50%，实际可用宽度只剩calc(100% - 24px)，得写成width: calc(50% - 12px) - 字体栈混入
system-ui：macOS和Windows渲染同一段文字宽度差1–2px，导致float: left总宽偶然超限 - 第三方脚本动态插入
<style></style>标签，覆盖了你的重置规则；可在DevTools的Computed面板里点开box-sizing，看“来源”是否来自你预期的CSS文件
normalize.css比传统reset更适配浮动布局
传统reset.css粗暴清零所有margin/padding/border，连input、button也不放过，结果表单控件失去默认交互样式，你得手动补line-height、border-radius；而normalize.css只修复真实差异——比如统一button的vertical-align、修正pre在Safari里的换行行为，保留语义与可访问性。
如果项目已用Tailwind或Windi这类原子CSS框架，它们内置的是normalize逻辑，再叠一层传统reset反而可能引发意外交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
