reset.css 不该预置清除浮动规则，因其目标是归一化浏览器默认样式（如 margin、padding、box-sizing），而清除浮动属具体布局干预；强行注入会触发意外 bfc、裁剪内容、污染伪元素。
reset.css 里不该预置清除浮动规则——这不是重置该干的事，加了反而容易引发布局冲突。
为什么不能把 .clearfix 塞进 reset.css
重置（reset）的目标是归一化浏览器默认样式，比如 margin、padding、box-sizing；而清除浮动是针对具体布局场景的干预手段，属于“有浮动才需清”，不是所有元素都浮动，更不是所有容器都需要包裹浮动子项。
强行在 reset.css 里全局注入 ::after 伪元素或 overflow: hidden，会导致：
- 所有块级元素隐式触发 BFC，干扰
position: absolute的定位上下文 - 第三方组件（如弹窗、下拉菜单）因父容器意外触发
overflow: hidden而裁剪内容 -
*::after { clear: both }这类通配写法会污染 SVG、图标字体等非布局元素的伪元素行为
真正该放进 reset.css 的浮动相关基础规则
只放三条底层归一化规则，不碰清除逻辑：
-
* { box-sizing: border-box; }—— 防止width + padding超出预期，这是浮动错位最常见的根源 -
img, video, canvas, svg { vertical-align: top; }—— 解决图片浮动后底部多出 3–4px 空白，Safari 和 IE 表现尤其分裂 -
ul, ol, p, blockquote, pre { margin: 0; }—— 避免一个未重置的<p></p>把浮动容器撑高，让父级高度塌陷看起来像“清不掉”
清除浮动该放在哪？用什么方式最稳妥
清除动作必须按需、显式、可追溯地应用，推荐两个落地点：
- 在项目自己的工具类文件（如
utils.css或layout.css）里定义.clearfix类，内容严格按现代标准：.clearfix::after {<br> content: ""; display: table; clear: both;<br>}<br>.clearfix { zoom: 1; /* IE6/7 */ } - 直接用
display: flow-root替代传统 clearfix —— 它原生触发 BFC 且无副作用，Chrome 58+、Firefox 53+、Safari 10.1+ 全支持，只需写：.container { display: flow-root; }
最后提醒一句：如果用了 Tailwind、Windi 或 Bootstrap 5+，它们的 base layer 已内置 box-sizing 和 vertical-align 修正，再叠一层传统 reset 很可能让 .clearfix 规则被覆盖或重复触发，得去 DevTools 的 Computed 面板里盯紧 display 和 box-sizing 的实际来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
