div设置float:right后发生重叠如何解决？需实现红色div居右黄色div在下方

• 浮动元素会脱离标准文档流，不再占据普通文档流的布局空间。你给黄色的.container设置float: right后，它会浮在页面上层，后续的红色div属于标准流内的块级元素，会默认从文档流顶部开始渲染，所以出现了重叠。

你可以根据实际布局需求选择对应方案：

需求1：黄色块居右，红色块排在黄色块下方（和当前HTML元素顺序一致） #

只需要给红色块添加清除浮动的clear: both属性即可，修改后红色块的代码：

<div style="display: block; margin: auto; background-color: red; height: 200px; width: 100%; clear: both;"></div>

clear: both的作用是让当前元素左右两侧都不允许出现浮动元素，所以红色块会自动移动到所有浮动元素的下方。

需求2：红色块居右，黄色块排在红色块下方 #

首先要调整两个元素的HTML顺序，把红色块放在黄色块前面，这里推荐两种实现方案：

方案1：浮动实现 #

给红色块加float: right，黄色块加clear: both清除浮动影响。注意100%宽度的块级元素设置浮动后依然占满整行，看不出居右效果，建议把红色块宽度调整为小于100%的数值，示例代码：

.container {
    height: 150px;
    margin: 10px;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: yellow;
    clear: both; /* 清除上方浮动影响 */
}

<div style="float: right; background-color: red; height: 200px; width: 50%;"></div>
<div class="container"></div>

方案2：无浮动实现（更推荐，不会出现浮动相关布局问题） #

直接给需要居右的元素设置margin-left: auto，不需要额外处理浮动，也不会出现重叠问题：

<div style="margin-left: auto; background-color: red; height: 200px; width: 50%;"></div>
<div class="container" style="margin: 10px 0 0 auto;"></div>

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