在Next.js布局页添加Footer组件后布局崩溃，如何修复？

• 检查Footer组件的CSS样式
  优先排查Footer自身的样式问题：比如是否设置了超出预期的margin/padding，或是使用position: absolute/fixed这类脱离文档流的定位属性，导致挤压或覆盖主体内容。可以临时注释Footer的样式代码，逐一排查影响布局的属性。

• 重构全局布局结构
  你当前直接在body下并列放置主体容器和Footer的结构容易出现布局问题，建议用一个全局容器包裹两者，通过Flex布局控制整体排版：

  <html>
    <body>
      <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
        <div>{children}</div>
        <Footer style={{ marginTop: 'auto' }} />
      </div>
    </body>
  </html>
  

  这种结构能让Footer自动固定在页面底部，同时保证主体内容不会被挤压。

• 排查全局样式冲突
  检查项目全局CSS文件（如globals.css）中是否对body、div等全局标签设置了统一的margin、padding或box-sizing规则，Footer组件可能未正确继承或覆盖这些规则导致错位。给Footer添加独立类名，针对性设置样式隔离。

• 开发模式下实时调试
  不要直接通过构建产物排查，先启动开发服务（npm run dev），打开浏览器开发者工具（F12）查看元素盒模型，对比添加Footer前后的布局变化，精准定位异常元素的尺寸或位置问题。

内容的提问来源于stack exchange，提问作者Michelangelo Foresta