CSS+float+sticky实现侧边栏导航滚动后内容左移如何修复

问题根源 #

当前布局问题来自float属性的固有特性：浮动元素仅会让其本身高度覆盖范围内的同级内容产生避让效果。你给侧边栏nav设置了height: 100vh，仅占满单屏视口高度，当页面滚动超过一屏后，下方的文本内容不再受浮动元素约束，就会偏移到左侧导航区域。

修复方案（二选一即可） #

方案1：给右侧内容设置固定左边距（改造成本最低） #

将所有非导航的页面内容包裹在独立容器中，给容器设置等于侧边栏宽度的左外边距：

<!-- 新增内容容器 -->
<div class="content">
  <p>Hey</p>
  <!-- 其余所有p标签全部放入该容器内 -->
</div>

新增CSS样式：

.content {
  margin-left: 250px;
  padding: 1em; /* 可选，避免内容贴边 */
}

方案2：改用Flex布局（更易维护，无浮动副作用） #

放弃浮动实现，用弹性布局实现左右结构，后续调整更灵活：

<!-- 新增全局外层容器 -->
<div class="page-wrapper">
  <nav>
    <!-- 原有导航代码保持不变 -->
  </nav>
  <div class="content">
    <!-- 所有右侧文本内容放入该容器内 -->
  </div>
</div>

调整CSS样式：

/* 新增外层容器样式 */
.page-wrapper {
  display: flex;
}
/* 修改nav原有样式，删除float属性 */
nav {
  height: 100vh;
  width: 250px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  left: 0;
  flex-shrink: 0; /* 防止侧边栏被挤压变形 */
}
/* 新增内容区域样式 */
.content {
  flex-grow: 1; /* 自动占满剩余宽度 */
  padding: 1em;
}

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