这是设计使然，因为这是float的工作方式。如果您参考文档：

float CSS属性在其容器的左侧或右侧放置一个元素，从而使 text和inline元素可以环绕它 。该元素 从 页面
的常规流 中 删除 ，尽管仍然保留一部分。

您应该注意float元素的2个功能：

• 已从正常流程中删除：这意味着其他元素可以与浮动元素重叠或与浮动元素重叠（如position:absolute）
• text和inline元素将环绕：只有text和inline level元素不会是重叠的浮动元素，而是会环绕它。

以下是一些基本示例，您可以更好地了解它们：

.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元素将环绕其周围。