Css float 内容上方的Div-向下移动Div后面的第二个Div

我正在尝试在内容div的上方添加一个宽度相同的div。 我希望它只向下推内容div，但它也会导致侧边栏div向下移动

<div id="container">
    <div id="new-div">new div</div>
    <div id="content">content</div>
    <div id="sidebar">sidebar</div>
</div>

---

如何避免侧边栏div向下移动？我希望它总是浮动在右上角。

我想到的两种最简单的方法是对html重新排序，使您的边栏在DOM中首先出现：

边栏
新部门
所容纳之物

或者使用“绝对位置”（position absolute）暴力将其移动到顶部：

（记住相对于容器div放置容器div以使其工作）

否则，您可以将左手边的“div”包装在自己的容器中

---

希望这有帮助

问题是，在某些情况下，

#新div

实际上会拉伸容器的100%，在这种情况下，还应该按下侧边栏。但在正常情况下，如果只是内容的宽度，则不应该。您所建议的两种方法的问题是，如果新div恰好拉伸了容器的100%，那么

#侧栏

div在右上角也会保持稳定。出于搜索引擎优化的原因，我担心把边栏放在第一位。在我的所有页面中，边栏都在内容后面。添加一个容器（请参见：）将允许您在不移动HTML的情况下执行此操作，但如果您是100%宽度，则不允许布局交换。你能提前知道这个案例并调整布局吗？然后，您可以使用以下内容（取消对其上方div的注释以获得全宽）

#container {
    background: lightgrey;
    width: 500px
}
#new-div {
    background: darkred;
    width: 300px
}
#content {
    background: lightblue;
    width: 300px;
    height: 400px;
    display: inline-block
   }
#sidebar { 
    background: darkgreen;
    width: 100px;
    height: 400px;
    float: right;
}

<div id="container">
    <div id="sidebar">sidebar</div>
    <div id="new-div">new div</div>
    <div id="content">content</div>

</div>