CSS分组堆叠Div无法右对齐及清除浮动的技术问题

你设置的 right: 0px 不生效，核心原因是**right 属性仅对定位元素（position 为 absolute/relative/fixed/sticky）有效**，而你的品红、青色Div是默认的 static 定位，所以这个属性完全不起作用。

给你两种简单的修复方案：

方案1：利用 margin 自动填充实现右对齐 #

直接给品红、青色Div设置 margin-left: auto，块级元素会自动将左外边距填满父容器剩余空间，从而实现右对齐：

<div style="background-color: #F0F; width: 10vh; height: 10vh; margin: 0 0 1vh auto;"></div>
<div style="background-color: #0FF; width: 10vh; height: 10vh; margin: 0 0 1vh auto;"></div>

方案2：用 Flexbox 统一控制父容器对齐（更推荐） #

给黄色父Div添加 display: flex; flex-direction: column; align-items: flex-end;，这样所有子元素都会自动右对齐，后续调整布局也更灵活：

<div style="position: absolute; top: 5vh; right: 5px; z-index: 100; background-color:#FF0; margin: 3px 5px; display: flex; flex-direction: column; align-items: flex-end;">
  <!-- 品红、青色Div保持原有宽高、margin即可，无需额外定位 -->
  <div style="background-color: #F0F; width: 10vh; height: 10vh; margin: 0 0 1vh 0;"></div>
  <div style="background-color: #0FF; width: 10vh; height: 10vh; margin: 0 0 1vh 0;"></div>
  <!-- 后续浮动元素部分也可以改成Flex，替代float -->
</div>

float确实容易引发父容器高度塌陷、影响后续元素布局的问题，给你三种常用解决方法：

方法1：Clearfix 伪元素法（兼容性最好） #

给包含浮动元素的父容器添加一个 clearfix 样式，通过伪元素清除浮动：

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

然后在HTML中给需要清除浮动的父容器加上这个类：

<div class="clearfix" style="right: 0px;">
  <div style="float: right; background-color: #F00; width: 7vh; height: 7vh; margin: 0 0 1vh 0;"></div>
  <div style="float: right; background-color: #0F0; width: 7vh; height: 7vh; margin: 0 1vh 1vh 0;"></div>
</div>

方法2：overflow 隐藏法（快速简单） #

给父容器设置 overflow: hidden 或 overflow: auto，让父容器强制包含浮动元素：

<div style="right: 0px; overflow: hidden;">
  <!-- 浮动元素 -->
</div>

注意：如果容器内有超出边界的内容，会被裁剪，适合内容不会溢出的场景。

方法3：用现代布局替代float（彻底解决） #

直接用 Flexbox 或 Grid 布局替代 float，完全避免浮动带来的问题。比如把原本用float右对齐的元素改成：

<div style="display: flex; justify-content: flex-end; gap: 1vh; margin-bottom: 1vh;">
  <div style="background-color: #F00; width: 7vh; height: 7vh;"></div>
  <div style="background-color: #0F0; width: 7vh; height: 7vh;"></div>
</div>

justify-content: flex-end 实现右对齐，gap 控制元素间距，比float更直观易维护。

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