伪元素位置偏移源于父容器因浮动子元素高度坍缩，导致定位基准失效；正确清除浮动需 content: "" + display: table + clear: both；现代推荐用 display: flow-root 触发 bfc；绝对定位伪元素时父容器须设 position: relative。
伪元素位置偏移是因为浮动子元素让父容器高度坍缩
父容器没设高度，又只包含 float 子项时，它会塌成高度为 0。此时，哪怕你给父容器写了 ::before 或 ::after，它们的定位基准（比如 top: 0、bottom: 0）实际是相对于一个“几乎不存在”的盒子，导致视觉上飘走或贴顶/贴底异常。
这不是伪元素本身写错了，而是它所在的上下文（父容器）没撑起来——连参考系都虚了，定位自然不准。
::after 清除浮动必须配合 display: table 才生效
常见错误是只写 clear: both 却忽略渲染前提：
-
content: ""不可省略，否则伪元素根本不生成 -
display: table比block更稳妥，避免 IE6/7 下 margin 双倍问题 - 若用
display: block，得额外加height: 0; visibility: hidden;才能确保不占空间又触发清除
正确写法示例：
.parent::after { content: ""; display: table; clear: both; }
现代修复优先用 display: flow-root 而非伪元素
display: flow-root 是专为解决这类问题设计的，它让父容器触发 BFC，天然包裹所有浮动子项，且对伪元素完全无干扰：
- 不用写额外伪元素，CSS 更干净
- 不会因
content或display值出错而失效 - 兼容性足够：Chrome 58+ / Firefox 57+ / Safari 10.1+
- 不影响
::before/::after的定位逻辑，它们能正常相对于完整高度的父容器计算位置
只需一行：
.parent { display: flow-root; }
绝对定位伪元素时，父容器必须设 position: relative
如果伪元素用了 position: absolute（比如做下划线、角标），而父容器仍是 static，默认会向上找最近已定位祖先——可能跳到 body，造成严重偏移。
- 给父容器加
position: relative是最轻量的锚点方案 - 不要依赖
overflow: hidden来“顺便”触发 BFC，它可能裁剪box-shadow或下拉菜单 - 用开发者工具检查“Computed”里的
position和containing block，确认伪元素是否真以父容器为参考
容易被忽略的是：即使清除了浮动，若伪元素自身脱离文档流，它的定位仍取决于父容器有没有成为有效的 containing block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
