网页底部出现巨大空白，通常源于滥用 `position: relative` 和超大负边距（如 `margin-top: -3500px`）强行“拖拽”元素，破坏了 html 自然文档流；正确做法是放弃手动定位，改用语义化结构与现代布局方案（如 flexbox）实现页脚粘底。
你在代码中大量使用 position: relative 配合夸张的 right、bottom、margin-top 等数值（例如 margin-top: -3500px、right: -1930px），这本质上是在强行将元素从正常文档流中“拽出”并凭空位移。浏览器仍会为这些被移走的元素保留原始占位空间（即“幽灵高度”），而你看到的“巨大空白”，正是这些未被清除的、不可见的布局残留区域。
更关键的是：这种写法完全违背 Web 标准布局逻辑。HTML 元素默认按文档流（normal flow） 自上而下、自左向右自然排列。当你用 position: relative + 大偏移量移动一个
时，它视觉上移走了，但其原始位置在流中依然存在，后续元素仍会基于那个“看不见的原点”继续排布——最终导致整个页面高度失控，页脚被推到视口极远处，留下大片空白。
✅ 正确解法：用现代 CSS 布局控制页脚位置
推荐采用 Flexbox 布局 + 最小高度容器 实现可靠的“粘性页脚（sticky footer）”：
/* 重置危险样式，启用现代布局 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d9d9d9;
font-family: "Source Sans Pro", sans-serif;
/* 关键：使 body 成为 flex 容器，主轴垂直，子项拉伸填充 */
display: flex;
flex-direction: column;
min-height: 100vh; /* 确保至少占满视口高度 */
}
/* 主要内容区：自动占据剩余空间 */
main {
flex: 1; /* 等价于 flex-grow: 1 */
}
/* 页脚：固定高度，自然位于底部 */
.footer {
background-color: #850000;
color: white;
height: 75px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}对应 HTML 结构优化（语义化 + 清晰分层）：
⚠️ 必须规避的高危操作（你当前代码中的典型问题）：
立即学习“前端免费学习笔记（深入）”；
- ❌ 禁止使用 position: relative + 超大 right/bottom（如 -1930px）定位内容——这是“CSS 拼图式开发”，不可维护、不响应、必出错；
- ❌ 禁止滥用 margin-top: -3500px 或 margin-bottom: -1000px 抵消高度——属于 hack，极易连锁崩坏；
- ❌ 禁止在非必要场景使用 float（你的 .menu li 浮动已导致父容器塌陷，需清除浮动或改用 Flex）；
- ❌ 禁止用
- 包裹非列表内容（如
- Auckland - Sylvia Park ）——语义错误，应使用
或
。
? 进阶建议：
- 将重复的门店样式抽象为通用类（如 .store-card, .store-title, .store-info），用 :nth-child() 或数据属性区分；
- 导航栏改用 Flex 布局替代 float，彻底解决塌陷问题；
- 引入 CSS Reset（如 Normalize.css）统一浏览器默认样式；
- 学习 CSS Grid 管理复杂多列布局（如门店信息网格）。
记住：好的 CSS 是“让元素自己找到位置”，而不是“用手把它们塞进缝隙”。 从今天起，删掉所有 position: relative + 数值偏移，拥抱文档流与 Flexbox——你的页面将立刻告别神秘空白，也为你后续学习响应式设计打下坚实基础。
