我最近在学习web开发，对浮动的概念感到困惑。这是我的密码。
.test {
background-color: red;
height: 200px;
width: 200px;
float: left;
}
.test1 {
background-color: blue;
height: 200px;
width: 200px;
}<div class="test">Box 1</div>
<div class="test1">Box 2</div>浏览器中的结果是此处
我只是不知道为什么文本框2被放在红色框的下面，而蓝色框向上移动并被红色框覆盖。据我所知，文本框2也应该向上移动，然后被红色框覆盖。
正如您在屏幕截图上看到的，静态元素以前确实受到了浮动元素的影响。蓝色的盒子不是蓝色的，因为它溢出了包装容器(这里是<body>(。如果你想把两个框都放在旁边，在"行"中的每个元素上添加float。
检查w3schools css float上的"The clearfix Hack"。如果你使用浏览器的DevTools，你会看到像w3schools这个链接的描述一样的溢出。为了更好的测试，我在你的例子中添加了第三个绿色框：
.test_01 {
background-color: red;
height: 100px;
width: 100px;
float: left;
}
.test_02 {
background-color: blue;
height: 100px;
width: 100px;
}
.test_03 {
background-color: green;
height: 100px;
width: 100px;
}<div class="test_01">Box 01</div>
<div class="test_02">Box 02</div>
<div class="test_03">Box 03</div>至少你应该清除你以前使用过的每一个浮子。如果你正在开发一个网格系统，你应该更好地使用flex box。Bootstrap将网格系统从float更改为display: flex，从版本3更改为版本4。你可以在w3schools或上找到display: flex的解释