li元素清除float无效问题求助：图片排列异常如何解决？

我来帮你拆解下问题根源，以及具体的修复方案：

首先，你遇到的核心问题是浮动作用在<img>上而非<li>本身，再加上没有正确处理<li>之间的浮动清除逻辑，才导致所有图片挤在同一行。

为什么原来的Clearfix没起作用？ #

Clearfix的核心作用是让父元素包裹住内部的浮动元素，避免高度塌陷。如果你之前是给<ul>加了clearfix，它只能解决ul自身的高度问题，但没法处理<li>之间的浮动干扰：

• <li>本身是块级元素，但因为内部的<img>浮动脱离了文档流，li的高度会塌陷成0，后续的li会直接贴在前面的li下方；
• 而浮动的img不受li高度限制，会和相邻li里的img挤在同一行，因为浮动元素本身是不占常规文档流位置的。

两种可行的解决方案 #

方案1：让<li>浮动，实现两行两列布局

这种方式适合你想要每行展示两个图片的场景：

/* 定义通用的clearfix工具类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.layout ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 让li浮动，每行占50%宽度 */
.layout ul > li {
  width: 50%;
  float: left;
  box-sizing: border-box; /* 避免padding/margin撑破宽度 */
}
/* 控制奇数/偶数li里的图片对齐方式 */
.layout ul > li:nth-child(odd) img {
  float: left;
}
.layout ul > li:nth-child(even) img {
  float: right;
}

对应的HTML（给ul添加clearfix类）：

<div class="layout">
  <ul class="clearfix">
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
  </ul>
</div>

方案2：不浮动li，只清除li的浮动影响

如果你想要每个li单独占一行，图片交替左右对齐：

.layout ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 给每个li添加clear: both，清除前面所有浮动元素的影响 */
.layout ul > li {
  clear: both;
  margin-bottom: 10px; /* 可选，增加li之间的间距 */
}
/* 给li加clearfix，让li撑开高度包裹浮动的img */
.layout ul > li::after {
  content: "";
  display: table;
  clear: both;
}
/* 保留你原来的图片浮动规则 */
.layout ul > li:nth-child(odd) > img { float: left; }
.layout ul > li:nth-child(even) > img { float: right; }

对应的HTML无需额外修改：

<div class="layout">
  <ul>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
  </ul>
</div>

关键总结 #

• Clearfix不是万能的，它只负责修复父元素的高度塌陷，没法解决兄弟元素之间的浮动干扰；
• 如果要让浮动元素换行，要么给容器（这里是li）加clear: both，要么让容器本身浮动并控制宽度；
• 当你给子元素加浮动时，一定要给父元素加clearfix，避免高度塌陷导致布局混乱。

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