如何在有序列表<li>项中实现图片右浮动文字环绕并解决遮挡问题

这个问题我之前也碰到过！其实核心是默认情况下<li>元素没法很好地包裹浮动元素，导致图片“跑”到了列表的后方。给你两个简单有效的解决方案：

方案一：用overflow触发BFC（最简便） #

只需要给<li>加上overflow: auto或者overflow: hidden，同时给图片设置浮动和间距就行，代码示例如下：

HTML代码 #

<ol>
  <li>第一项的普通内容，没有图片</li>
  <li>
    <img src="your-image-path.jpg" alt="需要环绕的图片" class="float-right-img">
    这里是要环绕图片的文字内容，可以多写几句测试效果——Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </li>
  <li>第三项的普通内容，没有图片</li>
</ol>

CSS代码 #

/* 给图片设置右浮动和左侧间距 */
.float-right-img {
  float: right;
  margin-left: 1.2rem;
  max-width: 25%; /* 可选：限制图片宽度，避免挤占太多文字空间 */
  height: auto; /* 保持图片比例 */
}

/* 让<li>包裹住浮动元素 */
li {
  overflow: auto;
  margin-bottom: 1rem; /* 可选：给列表项之间加些间距，更美观 */
}

原理是overflow: auto会触发块级格式化上下文（BFC），让<li>元素能够识别并包裹内部的浮动图片，不会让图片溢出到列表外面。

方案二：用Clearfix伪元素（更兼容旧浏览器） #

如果需要兼容非常老旧的浏览器（比如IE8及以下），可以用clearfix的方式来包裹浮动元素：

CSS代码 #

.float-right-img {
  float: right;
  margin-left: 1.2rem;
  max-width: 25%;
  height: auto;
}

li.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后给需要包裹图片的<li>加上clearfix类就行：

<li class="clearfix">
  <img src="your-image-path.jpg" alt="需要环绕的图片" class="float-right-img">
  环绕文字内容...
</li>

两种方案都能解决问题，方案一更简便，推荐优先使用~

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