Grid布局中float:left的等效实现？如何将inline-grid内的图片置于文本左侧

核心原因 #

inline-grid 属于栅格布局容器，按照CSS规范，栅格容器的直接子元素的float、clear属性都会被忽略，这不是Bug，是标准行为。你之前用justify-self不生效是因为该属性仅能控制栅格子项在单元格内的对齐，无法实现文本环绕效果，和float的逻辑完全不同。

解决步骤 #

• 首先修正HTML语法错误：<p>标签属于段落标签，仅允许嵌套行内内容，嵌套<div>会被浏览器自动截断DOM结构，导致布局异常，直接把外层的<p>替换为普通<div>即可。
• 不要将图片作为.company-content的直接子元素，把图片和需要环绕的文本放在同一个内部普通容器中，内部的float属性不会受外层inline-grid的影响，可以正常实现文本环绕效果。

修正后代码 #

CSS代码

.company-content {
    width: 79%;
    display: inline-grid;
}
/* 可选：可根据需求调整边距、尺寸 */
.float-img-wrapper {
    float: left;
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
}
.float-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

HTML代码

<div class="company-content">
  <div class="text-wrapper">
    <div class="float-img-wrapper">
      <img src="https://picsum.photos/500" alt="图标" />
    </div>
    Lorem Ipsum blablabla bla bla bla bla 文本内容较多时会自动环绕在图片右侧，和原生float:left效果完全一致
  </div>
</div>

补充说明 #

如果你的业务场景必须将图片作为.company-content的直接子元素，又要实现文本环绕，可以直接把.company-content的display属性改为inline-block，此时所有子元素的float都会正常生效。

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