清除浮动本身不会导致页面晃动；所谓“晃动”实为父容器高度坍缩与滚动条显隐抖动混淆所致，真正应采用clearfix伪元素方案并配合内容尺寸可控性优化。
清除浮动本身不会直接导致页面晃动；所谓“清除浮动带来的页面晃动”，其实是误把两种独立问题混在一起了——浮动引发的 父容器高度坍缩，和滚动条显隐引发的 视觉抖动。两者机制不同，修复方式也完全不同。
为什么加 overflow: hidden 后页面反而“跳一下”
这是最常被误解的点：给父容器加 overflow: hidden 或 overflow: auto 确实能触发 BFC、包裹住浮动子元素，但它同时会截断溢出内容。如果浮动子元素实际高度超出父容器设定范围（比如图片加载慢、字体回流、动态插入内容），浏览器会在渲染完成瞬间重排，造成视觉“跳动”或“闪一下”。
- 常见现象：页面初加载时父容器先塌陷、再突然撑开，背景/边框“弹出”
- 根本原因不是清除浮动，而是
overflow强制裁剪 + 后续内容尺寸变化引发的重排 -
overflow: auto还可能在不该出现滚动条的地方强行加滚动条，触发宽度突变（见下一条）
html { overflow-y: scroll } 和清除浮动毫无关系
这个写法是为了解决滚动条显隐导致的页面水平抖动，和浮动布局完全无关。它强制垂直滚动条常驻，锁死 body 可用宽度，避免因内容增减导致的 layout shift。但很多人把它和清除浮动混用，结果发现加了之后“不抖了”，就误以为是清除浮动起效——其实只是掩盖了另一个问题。
- 如果你的“晃动”只发生在滚动时或路由切换后，大概率是滚动条宽度突变，不是浮动没清
- 加
html { overflow-y: scroll }后，overflow: hidden清除浮动的效果依然要单独处理，不能互相替代 - Safari 下某些 zoom 场景仍可能微调，需额外补
html { margin-left: -webkit-scrollbar }
真正该用的清除浮动方案：优先选 ::after 伪元素
现代项目中，唯一推荐的清除浮动方式是 clearfix 的伪元素实现。它不改变盒模型、不裁剪内容、不触发意外滚动条，且兼容所有主流浏览器（包括 IE8+）。
标准写法：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
- 必须同时定义
::before和::after（或至少::after），否则 IE8 下可能失效 - 不要用
display: block; height: 0; visibility: hidden这套老写法——display: table更稳妥，避免 margin collapse 干扰 - 如果项目还需兼容 IE6/7，保留
*zoom: 1即可，无需额外 hack - 切记：类名要加在浮动元素的直接父容器上，不是加在浮动元素自己身上
最易被忽略的一点：清除浮动只是让父容器“知道”子元素存在，但它不解决子元素自身因加载、字体、动画等引发的尺寸变化。真正的稳定布局，得靠控制内容可预测性（如图片设宽高、字体预加载、避免无约束 flex 增长），而不是依赖某一种清除技巧来“兜底”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
