CSS float:right失效求助：实现右侧元素下方换行布局

你的问题核心是float元素会脱离正常文档流，导致第二个div会填充第一个div留下的空间，所以出现并排显示的情况。下面给你两种可行的解决方案：

方案一：清除浮动（兼容旧浏览器） #

先给HTML里的子div加上类名方便控制：

<div class="container">
    <div class="btn-group">
        <button> Button 1 </button> 
        <button> Button 2 </button> 
    </div>

    <div class="image-box">
        <img src="你的图片地址" alt="">
    </div>
</div>

对应的CSS：

.btn-group {
    float: right; /* 实现第一个div右对齐 */
}
.image-box {
    clear: right; /* 清除右侧浮动，强制该div换行到下方 */
}

方案二：使用Flexbox布局（现代推荐） #

同样给元素加类，CSS更简洁直观：

.container {
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    align-items: flex-end; /* 所有子元素整体右对齐 */
}

这种方式不需要给子元素设置float，就能自动实现第一个div右对齐、第二个div在其下方的效果。

如果不想额外加类名，也可以用子元素选择器（如:first-child、:nth-child(2)）替代类选择器，但加类名的代码更易维护。

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