如何停止div的重叠？

Question

当我将容器的浮动设置为右侧时，会发生重叠，这是什么原因如何避免？我想要黄色 div 在红色下方，红色应该在右边 ...

.container {
    float: right;
    height: 150px;
    margin: 10px;
    width: 50%;
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    background-color: yellow;
}

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

Answer 1

对 red 使用规则 clear: both div.

This is a keyword indicating that the element is floated down to clear both left and right floats.

.container {
    float: right;
    height: 150px;
    margin: 10px;
    width: 50%;
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    background-color: yellow;
}

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

Answer 2

我想指出一些问题。

div 元素默认为块元素，因此无需指定 display: block;
您在同一个 display: flex 和 float:right 上使用 div 您可以使用其中任何一个。
如果你想给 float:right 你应该在另一个 div 上指定 float:right 或者在红色 div 上使用 clear: both 来获得进入正常流程。

如何停止div的重叠？

how to stop overlapping of divs?

html

css

css-float