inline-block元素与float元素的交互行为差异原因咨询

示例代码 #

CSS 代码 #

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.uj {
  background-color: aqua;
  display: inline-block;
}

.qw {
  height: 200px;
  float: left;
}

HTML 代码 #

<img src="https://picsum.photos/200/300" class="qw" alt="" height="22px">
<span>other text</span>

<div class="uj">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique pariatur t a quam eligendi dolores earum in officia qui maiores, doloremque repellendus dolore a chitecto, quaerat assumenda odio eaque! Saepe, et.</div>

<img src="https://placehold.co/400" alt="" height="22px">

问题描述 #

在上述代码场景中，当移除.uj类的display: inline-block属性时，该div内的文本会出现在左侧float图片的旁侧；保留该属性时，文本则在图片下方换行显示。但span文本始终显示在float图片旁侧，请问该现象的原因是什么？

原因解析 #

• 浮动元素的核心特性：浮动元素会脱离正常文档流，旁边的内容会根据自身元素类型，表现出不同的环绕行为。
• <span>是行内元素，天生具备环绕浮动元素的特性——只要浮动元素右侧有可用空间，它就会挤到旁边显示，所以始终出现在float图片旁侧。
• 针对.uj这个div的两种状态：
  • 当保留display: inline-block时，div变为行内块元素。行内块元素的整个盒子是一个不可拆分的整体，无法让部分内容环绕浮动元素。由于左侧float图片高度为200px，行内块元素没有足够的垂直空间挤到图片旁，因此只能被挤到图片下方换行显示。
  • 当移除该属性后，div恢复默认的块级元素。块级元素默认占满父容器整行宽度，但它内部的文本内容会自动避开浮动元素占据的区域，跑到浮动元素右侧的空隙处显示，所以看起来文本就在float图片旁侧（实际上div的背景区域仍然是占满整行的，只是文本绕开了浮动区）。

内容的提问来源于stack exchange，提问作者Ujjawal