根本原因是浮动父容器未形成bfc导致高度塌陷，使absolute子元素的包含块向上回溯；应使用display: flow-root创建bfc，而非clear或overflow:hidden。
浮动父容器里absolute子元素定位错乱
根本原因不是子元素写错了top或left，而是浮动父容器没形成BFC、高度塌陷，导致absolute子元素的“包含块”向上回溯到更外层的已定位祖先（甚至body），视觉位置和代码预期严重脱节。
用开发者工具选中那个absolute元素，在“Computed”面板里看position和containing block信息，如果显示的包含块不是你写的父容器，基本就坐实了这个问题。
- 别给浮动父容器加
clear: both——它对子元素的定位毫无影响 - 别只靠调
top值硬凑位置——负边距、字号变化、响应式缩放都会让它失效 - 避免用
overflow: hidden强行触发BFC——可能意外裁剪box-shadow、下拉菜单或绝对定位的弹层
让浮动父容器成为可靠的定位上下文
最干净的做法是给浮动父容器加display: flow-root。它既创建BFC包裹内部浮动子项，又不改变布局行为，还不触发margin合并，副作用最小。
如果必须兼容老浏览器（比如IE11），才退回到伪元素清除法：.parent::after { content: ""; display: table; clear: both; }，但注意必须配height: 0和visibility: hidden，否则可能撑开多余行高。
-
position: relative也能当锚点，但它本身不解决塌陷——父容器依然没高度，只是“碰巧”成了定位参照物 - 若父容器已有
position: relative但定位仍错，说明有更近的已定位祖先干扰，用开发者工具逐层检查position属性 - 不要同时给父容器设
float和position: relative——float会被忽略，且容易误判布局意图
absolute子元素的top/left计算受负边距干扰
如果父容器内有子元素用了margin-top: -Xpx（常见于微调边框重叠），即使父容器已设position: relative，absolute子元素的top值也会基于被负边距上移后的内容起始线计算，导致偏移累积。
比如每个.heure高35px，你写top: 420px想对齐第12行，但首个.heure因margin-top: -0.9px上移了，实际第12个的顶部位置就比420px低，结果.horaire就往下偏了。
- 优先移除负边距，改用
border-box+ 统一边框控制视觉连接 - 若必须保留负边距，给父容器显式设
padding-top: 0，切断它对包含块顶部基准的影响 - 避免在relative父容器里混用
float和margin——这两者叠加会让文档流基准变得极难预测
为什么给浮动元素加absolute反而更糟
有人试过直接给飞出的浮动元素加position: absolute来“拉回来”，结果是彻底脱离文档流：父容器高度归零、后续兄弟元素堆叠到顶部、原本的文字环绕消失。这不是修复，是破坏。
CSS规范明确规定：position: absolute会强制把float的计算值设为none，开发者工具里能看到float属性被划掉。此时元素只认最近的relative祖先，和原来浮动的位置毫无关系。
- 如果你真需要某个元素精确钉在浮动块右上角，正确做法是：给浮动块的父容器设
position: relative，再把目标元素设为position: absolute并用top/right定位 - 浮动+absolute混用只适用于明确需要“视觉锚定”的场景，比如图标贴着图片右上角；它不是浮动塌陷的解药
- 现代项目中，图文环绕以外的横向排列需求，优先用
display: flex或display: grid——它们天然不塌陷、无需清除、响应式友好
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
