这是应该如何绘制元素的逻辑行为，但是您遇到了溢出问题以及float的工作方式，这使事情变得 奇怪 。
让我们删除一些属性，并逐步遵循代码。首先让我们来消除
overflow:auto来自
main从固定高度
.second
.main { border-style: solid; border-color: yellow; }.first { width: 200px; height: 100px; float: left; border: 10px solid green;}.second { width: 200px; border: 10px solid blue;}<div > <div >test1</div> <div >test2</div></div>如您所见， 绿色 的浮动元素位于 蓝色 div
上方，并且仅围绕其内容（文本）浮动。就像你可以在这里阅读：
float CSS属性指定一个元素应沿着其容器的左侧或右侧放置，从而允许 text和 inline元素环绕其周围
。尽管仍保留了一部分内容（与绝对定位相反），但该元素已从网页的 常规流程 中删除 。
并且由于两者
div的 宽度相同， 因此文本将在底部而不是右侧。你可以改变
width的的 蓝色 div来看到了差距：
.main { border-style: solid; border-color: yellow; }.first { width: 200px; height: 100px; float: left; border: 10px solid green;}.second { width: 200px; border: 10px solid blue; animation:change 1s infinite alternate linear;}@keyframes change{ from{width:200px} to{width:400px}}<div > <div >test1</div> <div >test2</div></div>现在，如果您检查绘画顺序，您将看到我们首先在步骤（4）中打印块非浮动元素的边框/背景，然后在步骤（5）中打印浮动元素，然后打印非元素的内容步骤（7）中的-
floating元素，解释了为什么在 绿色* 下看到 蓝色 *
现在，如果我们将固定高度添加到 蓝色 元素上，您将面临 溢出 问题，因此蓝色的内容将保留在外部（如上一代码），但是定义元素限制的边框将在
绿色 元素后面（就像paiting顺序中描述的那样）
这是带有动画的代码，可以更好地了解正在发生的事情：
.main { border-style: solid; border-color: yellow; }.first { width: 200px; height: 100px; float: left; border: 10px solid green;}.second { width: 200px; border: 10px solid blue; animation:change 2s infinite alternate linear;}@keyframes change { from{height:300px;} to{height:50px;}}<div > <div >test1</div> <div >test2</div></div>您还可以清楚地看到，
main黄色
元素的高度紧随蓝色元素的高度，因为它是唯一的流入元素，通过添加
overflow:auto您将创建的第二个问题，您的浮点数在其父元素BUT的高度中未被考虑块格式化上下文，因此该元素的行为将有所不同，并将考虑内部浮动元素的高度：
.main { border-style: solid; border-color: yellow; overflow: auto;}.first { width: 200px; height: 100px; float: left; border: 10px solid green;}.second { width: 200px; border: 10px solid blue; animation:change 2s infinite alternate linear;}@keyframes change { from{height:300px;} to{height:50px;}}<div > <div >test1</div> <div >test2</div></div>在这最后一章中，您可以清楚地看到溢出问题，这是由于添加了滚动条而使文本位于 蓝色 div 之外
oveflow:auto。
