如何实现按钮点击滚动至新增区块？并调整区块位置不破坏布局

• 清除浮动冲突
  如果项目区块上方元素用了float属性，下移后容易导致布局错乱。给项目区块添加清除浮动的样式：

#project-section {
  clear: both;
}

或者给项目区块的父容器加 clearfix 类来彻底清除浮动影响：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

• 修正定位属性
  检查页面元素是否用了position: absolute/fixed，这类定位会脱离正常文档流，移动区块后容易打乱布局。确保项目区块使用默认的position: relative，如果父容器设了position: relative作为定位参考，别让区块继承错误的top/bottom值。

• 调整Flex/Grid布局规则
  如果主页用Flex或Grid布局，移区块后要对应调整容器属性：

  • Flex布局：如果想把区块推到页面底部，给父容器设min-height: 100vh，然后给项目区块加margin-top: auto。
  • Grid布局：修改网格模板的行定义，比如grid-template-rows: 1fr auto，让项目区块自动占底部位置，同时保证上方内容正常排列。

• 修复容器高度塌陷
  如果项目区块的父容器没设固定高度，且内部元素用了浮动/绝对定位，会导致容器高度为0，破坏下方布局。可以给父容器设min-height，或者直接用Flex/Grid布局替代浮动，从根源避免塌陷问题。

• 优化锚点跳转体验
  因为有按钮跳转至项目区块，还要防止跳转后区块被顶部导航遮挡，给区块加滚动边距：

#project-section {
  scroll-margin-top: 80px; /* 数值根据导航栏高度调整 */
}

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