这是设计使然，因为这是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 ></div><div ></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 ></div><div ></div>当我们添加文本时，您会注意到文本将如何环绕float元素，并将如何保留在它的包含块（蓝色div）中。
.float { width: 100px; height: 100px; background: red; float: left;}.blue { width: 200px; height: 200px; color:#fff; background: blue;}<div ></div><div > 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 ></div><div > some text here some text here s</div><div > some text here some text here some</div>为了简单起见：float元素将与周围的所有block元素重叠，而inline元素将环绕其周围。
