父容器 padding 干扰 clear 定位锚点，导致 clear: both 逻辑生效但视觉错位；伪元素 clearfix 失效常见于 content 缺失、font-size: 0、display/visibility 隐藏或层叠上下文隔离；overflow: hidden 与 clearfix 叠加会掩盖问题；浮动子元素的 vertical-align 和 margin-collapse 也会加剧高度偏差。
父容器 padding 干扰 clear 定位锚点
clear: both 生效了，但后续元素看起来还是“卡在半空”，实际是父容器的 padding-top 把视觉起始点往上推了，而 clear 是从 content-box 边缘开始计算下推距离的。结果就是：逻辑上清到位了，眼睛里没到位。
- 用开发者工具选中父容器，在 “Computed” 面板里重点看
padding-top和padding-bottom是否非零 - 临时设
padding: 0测试——如果错位消失，就确认是 padding 干扰 - 若必须保留 padding，别依赖
clear: both拉动后续元素，改用margin-top显式控制间距，更可控
伪元素 clearfix 被其他样式覆盖或失效
.clearfix::after 没撑高，常见不是代码写错，而是被隐藏、被重置或没触发渲染。
- 漏了
content: ""—— 伪元素根本不会生成，clear: both形同虚设 - 父容器设了
font-size: 0，而伪元素没重置字体大小，旧版浏览器中display: table可能高度为 0 -
::after被display: none、visibility: hidden或opacity: 0覆盖 - 父容器有
transform或will-change，可能创建独立层叠上下文，隔离清除效果
父容器同时用了 overflow: hidden 和 clearfix
两者叠加不仅多余，还容易掩盖问题：overflow: hidden 会裁剪溢出内容（如下拉菜单、box-shadow），而 clearfix 在它之下根本没机会生效。
- 检查是否重复写了
overflow: hidden和.clearfix类——优先保留一个 - 若已用
overflow: hidden，就别再加 clearfix；反之亦然 - 特别注意：某些 UI 库或原子化 CSS（如 Tailwind）可能在 class 中隐含
overflow，需在 DevTools 的 “Computed” 中逐条核对
浮动子元素自身有 vertical-align 或 margin-collapse 干扰
即使父容器高度恢复了，子项之间的垂直对齐或外边距合并仍可能让整体高度“看起来偏少”。
- 浮动
<li>或<a></a>上写了vertical-align: middle？该属性对块级浮动元素无效，但会干扰行盒基线，间接影响伪元素清除位置 - 多个浮动子项之间本应合并的
margin-bottom因脱离文档流而失效，导致总高度比预期小 - 父容器设置了
min-height或height，覆盖了 clearfix 撑起的真实高度——优先用min-height替代固定height
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
