为什么我的浮动元素呈现阶梯状排列？附相关代码示例

针对你提到的在容器内放置10个带锚点跳转的浮动方块需求，我把你提供的CSS代码补充完善，同时整理了对应的HTML结构和关键注意事项，帮你实现更稳定、交互友好的布局：

完整HTML结构 #

<div class="wrapper">
  <a href="#target1" class="square">
    <div class="content">方块1</div>
  </a>
  <a href="#target2" class="square">
    <div class="content">方块2</div>
  </a>
  <!-- 重复上述结构直到10个方块 -->
</div>

完善后的CSS代码 #

/* 容器：清除浮动避免高度塌陷 */
.wrapper {
  overflow: hidden;
  max-width: 1200px; /* 可选：限制容器宽度，让布局更规整 */
  margin: 0 auto; /* 可选：让容器水平居中 */
}

.square {
  float: left;
  width: calc(20% - 16px);
  padding-bottom: calc(20% - 16px); /* 用padding实现正方形比例 */
  overflow: hidden;
  background-image: url(myimg.jpg);
  border-radius: 5%;
  background-size: cover;
  background-position: center; /* 补充：让背景图居中显示，避免裁剪错位 */
  position: relative;
  z-index: 10;
  margin: 8px;
  transition: ease all .3s;
  color: rgb(255, 230, 20);
  text-decoration: none; /* 移除a标签默认下划线 */
  display: block; /* 确保a标签完全包裹方块，点击范围覆盖整个区域 */
}

/* 可选：添加hover交互效果 */
.square:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.content {
  position: absolute;
  width: 88%;
  bottom: 8px; /* 定位内容到方块底部 */
  left: 6%; /* 配合width:88%实现水平居中 */
  padding: 6px;
  background-color: rgba(0,0,0,0.6); /* 补充：半透明背景提升文字可读性 */
  border-radius: 3px;
}

关键注意事项 #

• 清除浮动：给.wrapper添加overflow: hidden，解决浮动元素导致的容器高度塌陷问题，确保容器能完整包裹所有方块。
• 点击范围优化：给作为a标签的.square设置display: block，保证整个方块区域都能触发跳转，而不是仅文字部分可点击。
• 正方形比例实现：利用padding-bottom的百分比特性（基于父元素宽度计算），确保方块始终保持正方形比例。
• 视觉体验优化：补充background-position: center让背景图居中显示，添加hover缩放效果增强交互反馈，给文字层加半透明背景提升可读性。

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