Html 两个相邻块的浮动行为

我是CSS新手。请帮助确认我的理解是否正确。 我有两个块元素：第一个是浮动的，第二个不是。 所有设置如下所示，是否正确显示我的结果布局 两个街区在一条线上相邻？ 我的理解是从第一个街区开始 是向左浮动的，但第二个不是，所以后者应该保持在原来的位置并环绕在同一条线上

#box1{
    float:left;
    width: 200px;
    background-color: purple;
}

#box2{
    width:250px;
    background-color: orange;
}

<div id="box1">box 1</div>
<div id="box2">box 2</div>

#框1{
浮动：左；
宽度：200px；
背景颜色：紫色；
}
#框2{
宽度：250px；
背景颜色：橙色；
}
方框1
方框2

只要两个框周围的容器足够大，是的，框1将位于容器的左边缘，再右200像素是框2（本身缩短为50像素。请参阅）

如果框2变得更大（由于内容更多），它将如下所示：

+-------+----------+
| box 1 |  box 2   |
+-------+          |
|                  |
+-------+----------+

---

你说得有点对。你可以更清楚地看到这里的行为-

---

如果在框2中添加更多内容，它将回到左侧并在浮动框下方对齐。

是的，它们应该显示在同一行中。为什么不试试这个呢？这是：