本文深入解析 inline-block 元素在存在左浮动元素（如 float: left）时的换行机制，阐明其“内容自适应宽度”特性如何导致文本溢出后强制换行，对比普通内联元素（如 ）的行内流式布局差异。

本文深入解析 `inline-block` 元素在存在左浮动元素（如 `float: left`）时的换行机制，阐明其“内容自适应宽度”特性如何导致文本溢出后强制换行，对比普通内联元素（如 ``）的行内流式布局差异。

当一个元素设置为 display: inline-block 且未显式指定宽度时，它的宽度会由内容决定——即“收缩包裹”（shrink-to-fit）。这与纯 inline 元素（如 <span></span>）不同：inline 元素可被拆分、换行，并始终尝试在当前行内尽可能填充剩余空间；而 inline-block 是一个不可分割的独立盒模型，即使内容很长，浏览器也会先计算其整体所需最小宽度，再判断是否能放入当前行的可用水平空间中。

在你的示例中：

• <img class="qw"> 设置了 float: left，脱离文档流，但为后续行内级元素（包括 inline 和 inline-block）留出右侧的“环绕空间”；
• <span>other text</span> 是纯 inline 元素，可断行、可压缩，因此紧贴图片右侧显示，甚至跨多行排列；
• 而 <div class="uj"> 是 <code>inline-block，其内部大段文本使其自然宽度远超图片右侧剩余空间（例如容器宽度减去图片宽度后的余量），于是整个 inline-block 盒子无法塞入该行，整体下沉至下一行——这是 inline-block 的关键行为：它不折行，只整块移动。

  ✅ 验证方式：可通过限制容器宽度（如 .cont { width: 50%; }）或显式设置 .uj { width: 300px; } 来观察 inline-block 在空间充足时确实会与浮动图片并排显示。

  /* 推荐调试技巧：添加边界与尺寸提示 */
  .uj {
    background-color: aqua;
    display: inline-block;
    border: 1px solid #007acc;
    box-sizing: border-box;
    /* 可选：显式控制宽度以避免意外换行 */
    /* width: calc(100% - 220px); /* 假设图片宽200px + 间距 */ */
  }

  ⚠️ 注意事项：

  • inline-block 与浮动共用时，不要依赖其自动“绕排”效果，它不是真正的文本环绕，而是基于行盒（line box）可用宽度的整块定位；
  • 若需图文混排+文字环绕，应优先使用 float + inline 内容，或现代方案（如 display: flow-root 清除浮动 + CSS Grid/Flex 布局）；
  • 所有 inline-block 元素默认受字体大小影响，行间可能产生空白间隙（来自 HTML 中的换行符），可通过父容器设置 font-size: 0 或使用 flex 替代。

  总结：inline-block 的“块级尺寸 + 行内定位”双重特性，使其在浮动上下文中表现得更像一个“倔强的盒子”——宁可换行，也不折行。理解这一点，是精准控制复杂内联布局的关键基础。