idDivContents被idDivFooter溢出覆盖，如何让idDivFooter置于其下方？

idDivFooter溢出覆盖idDivContents的问题，和给出的HTML结构顺序没有冲突——常规文档流中块级元素会默认从上到下排布，出现覆盖一定是CSS属性设置偏离了常规文档流规则，可按以下优先级逐一排查修复：

常见触发原因与对应修复方式 #

• 非静态定位导致的脱离文档流
  这是概率最高的诱因：如果给idDivFooter设置了position: absolute/position: fixed/position: sticky这类非默认定位，再搭配top/bottom等偏移值，元素就会脱离常规排布流，不受原本的位置约束。
  修复方式：如果不需要页脚做固定/吸顶效果，直接移除页脚的非静态定位属性，让它回到常规文档流，就会自动落在idDivContents的正下方。如果确实需要保留固定定位效果，需要给页面整体内容区设置和页脚高度等大的padding-bottom，给页脚预留独立的展示空间，避免遮挡内容。
  同时需要检查两个元素的z-index层级，不要给页脚设置无意义的高层级，避免出现主动覆盖内容的问题。
• 父容器高度塌陷导致的视觉错位
  如果idDivContents内部的三个子块都设置了浮动，但没有做清除浮动处理，idDivContents会因为无法计算浮动子元素的高度，出现容器高度塌陷为0的情况，此时排在后面的idDivFooter会自动上移，视觉上呈现出“覆盖”主内容的效果。
  修复方式：给idDivContents增加清除浮动逻辑——可以给容器设置overflow: hidden（非固定定位场景适用），或者使用标准的clearfix伪元素写法，让容器能够被内部的浮动子元素正常撑开，恢复正确的高度后，页脚就会自动回到预期的位置。
• 负外边距导致的位置偏移
  如果两个元素任意一个设置了不合理的负margin值，比如给页脚设置了margin-top为负值，会让页脚向上偏移对应像素，直接覆盖到上方的内容区域。
  修复方式：通过开发者工具查看两个元素的盒模型参数，移除无效的负外边距配置，调整为符合设计预期的正边距值即可。

快速验证技巧：修复完成后可以在开发者工具的布局面板中查看两个元素的边界坐标，确认idDivContents的底部边缘和idDivFooter的顶部边缘刚好衔接，不存在像素级的重叠错位即可。

内容的提问来源于stack exchange，提问作者Utpal Gaurav