洋红色和青色的 div 是错误的。它们应该与包围的黄色 div 的右侧对齐。我已在洋红色和青色 div 上添加了
right: 0px;<body style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000; font-family: 'Arial', sans-serif;">
<div style="position: absolute; top: 5vh; right: 5px; z-index: 100; background-color:#FF0; margin: 3px 5px;">
<div style="right: 0px; background-color: #F0F; width: 10vh; height: 10vh; margin: 0vh 0vh 1vh 0vh;"></div>
<div style="right: 0px; background-color: #0FF; width: 10vh; height: 10vh; margin: 0vh 0vh 1vh 0vh;"></div>
<div>
<div style="right: 0px;">
<div style="float: right; background-color: #F00; width: 7vh; height: 7vh; margin: 0vh 0vh 1vh 0vh;"></div>
<div style="float: right; background-color: #0F0; width: 7vh; height: 7vh; margin: 0vh 1vh 1vh 0vh;"></div>
</div>
<div style="right: 0px;">
<div style="float: right; background-color: #00F; width: 7vh; height: 7vh; margin: 0vh 0vh 1vh 0vh;"></div>
<div style="float: right; background-color: #FFF; width: 7vh; height: 7vh; margin: 0vh 1vh 1vh 0vh;"></div>
</div>
</div>
</div>
</body>我还听说花车很麻烦。
如何清除所有浮动以使下面的任何 div 不受影响？
不要使用浮动，使用 flexbox 或 grid。此代码片段使用了 Flexbox。
body {
background: black;
}
.d1 {
position: absolute;
top: 1em;
right: 1em;
background-color: yellow;
display: flex;
flex-direction: column;
gap: 1vh;
align-items: end;
}
.d2 {
display: flex;
gap: 1vh;
}
.square {
aspect-ratio: 1;
}
.magenta, .cyan {
width: 10vh;
}
.red, .lime, .blue, .white {
width: 7vh;
}
.magenta {
background-color: magenta;
}
.cyan {
background-color: cyan;
}
.red {
background-color: red;
}
.lime {
background-color: lime;
}
.blue {
background-color: blue;
}
.white {
background-color: white;
}<body>
<div class="d1">
<div class="square magenta"></div>
<div class="square cyan"></div>
<div class="d2">
<div class="square lime"></div>
<div class="square red"></div>
</div>
<div class="d2">
<div class="square white"></div>
<div class="square blue"></div>
</div>
</div>
</body>