这是设计使然，因为这是float的工作方式。如果您参考文档：
float CSS属性在其容器的左侧或右侧放置一个元素，从而使 。该元素 页面 中 ，尽管仍然保留一部分。
您应该注意float元素的2个功能：
以下是一些基本示例，您可以更好地了解它们：
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}
<div class="float"></div>
<div class="blue"></div>
蓝色div与float元素重叠，因为它是一个块级元素。
如果将其设置为内联级别元素（inline-block），则不会
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}
<div class="float"></div>
<div class="blue"></div>
当我们添加文本时，您会注意到文本将如何环绕float元素，并将如何保留在它的包含块（蓝色div）中。
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}
<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>
如果我们有更多的蓝色div，也会发生相同的情况：
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}
<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>
为了简单起见：float元素将与周围的所有block元素重叠，而inline元素将环绕其周围。
602392714
清零编程群