我最近正在学习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>在浏览器中的结果是here
我只是不知道为什么将文本框2放置在红色框的下方，但蓝色框向上移动并被红色框覆盖。据我了解，文本框2也应向上移动，然后由红色框覆盖。
如您在屏幕快照中所见，静态元素确实从浮动元素获得了效果。无论如何，蓝色框都不是蓝色的，因为它溢出了包装容器（此处为<body>）。如果要将两个方框都放在旁边，请在应位于“行”中的每个元素上添加float。
检查w3schools css float上的“ 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>至少您应该清除以前使用的每个浮点数。如果要开发网格系统，则最好使用弹性盒。 Bootstrap将grid system从float更改为display: flex，从版本3更改为版本4。您可以在w3schools或display: flex]上找到有关here的说明。