栅格系统中无需清除浮动，因float与grid互斥；grid容器内clear和overflow:hidden无效，因float被忽略；响应式断点需显式重置float:none等属性以防旧样式泄漏。
栅格系统里根本不需要清除浮动——因为 float 和 grid 是互斥的布局机制，强行混用会导致不可预测的行为。
为什么在 grid 容器里写 clear 或 overflow: hidden 没用
当父元素设置了 display: grid，所有直接子元素自动成为 grid item，float 属性会被忽略（规范明确要求），此时：
-
clear属性对 grid item 完全无效，浏览器会静默丢弃 -
overflow: hidden虽能触发 BFC，但无法“包含”浮动——因为子元素压根没浮动，只是被 grid 布局接管了 - 伪元素
::after+clear: both会在 grid track 外生成一个空 item，可能破坏行高或引发额外换行
响应式断点中真正要处理的是“从 float 切换到 grid”时的残留问题
常见场景是：PC 端用 float 布局，移动端改用 grid。这时必须主动重置旧的浮动声明，否则旧规则仍可能生效（尤其当媒体查询顺序或 specificity 不够时）：
- 在断点内显式写
float: none，而不是依赖 grid 自动忽略——避免旧样式泄漏 - 不要只改
display，还要覆盖clear、vertical-align等可能干扰 grid 的属性 - 示例：
@media (max-width: 768px) { .layout-grid { display: grid; } .layout-grid > * { float: none; clear: none; vertical-align: auto; } }
如果必须兼容老代码，优先用 display: flow-root 替代 overflow: hidden
当某些容器仍需支持 float 子项（比如遗留模块），又想在断点中安全包裹它们，display: flow-root 比 overflow: hidden 更干净：
立即学习“前端免费学习笔记（深入）”；
- 它明确创建 BFC，且不截断溢出内容（
overflow: hidden会意外隐藏下拉菜单、tooltip 等） - 在断点中给父容器加
display: flow-root，比给每个子项加clear更轻量 - 注意兼容性：
flow-root在 IE 中不支持，如需兼容，退回到overflow: auto+zoom: 1（仅 IE6/7）
真正容易被忽略的是：很多人在媒体查询里只改 grid-template-columns，却忘了浮动规则仍在 CSSOM 中存在——它不会因新 display 值而自动失效，必须手动归零。
