CSS浮动布局下如何让段落不跨浮动元素拆分换行

CSS 浮动布局默认以行盒为最小排布单位，块级段落被拆成多行顺着浮动元素边缘排布时，无法感知自身是否跨了浮动元素的垂直边界，因此会出现单段最后一行落在图片下方的割裂情况。
要实现「保留原有环绕效果 + 单段整体不拆分，宽度不足时整块下移」的目标，可按照以下步骤调整：

基础样式配置（保留原有环绕效果） #

• 先为图片设置固定浮动规则，确保原有环绕逻辑正常生效：

.featured-image {
  float: left;
  width: 220px; /* 固定图片宽度 */
  aspect-ratio: 3/2; /* 搭配比例保证高度可计算，避免高度无约束 */
  margin: 0 1.2rem 1rem 0; /* 图片与文字的基础间距 */
}

• 为段落设置基础排版规则：

.content-paragraph {
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

核心约束规则（避免段落被拆分） #

根据兼容性需求可选择两种落地方案：

方案1：纯CSS实现（现代浏览器适配，无JS开销） #

利用容器查询判断排版容器宽度，当宽度不足以支撑「图片宽度 + 段落最小舒适阅读宽度」时，自动给段落添加清除浮动规则，让所有段落整块移到图片下方，全程保留宽度足够时的环绕效果：

/* 将内容外层设置为容器查询的检测范围 */
.content-wrapper {
  container-type: inline-size;
  container-name: content;
}

/* 阈值可根据实际排版调整，示例为图片220px + 最小段落阅读宽度380px = 600px断点 */
@container content (max-width: 600px) {
  .featured-image {
    float: none;
    width: 100%;
    margin: 0 0 1rem 0;
  }
  .content-paragraph {
    clear: both; /* 段落整块下移到图片下方，不会被拆分 */
  }
}

该方案的运行逻辑为：当容器宽度大于断点值时，图片保持左浮动，段落自然环绕，完全复现原有排版；当宽度小于断点值时，图片取消浮动占满全宽，段落全部在图片下方排布，不会出现段落被拆成两半、仅最后一行露在图片下方的情况。

方案2：轻量JS实现（兼容旧浏览器，支持逐段精细判断） #

如果需要更灵活的控制（比如仅让会跨边界的段落下移，保留前面段落的环绕效果，而非所有段落统一下移），可通过位置检测实现逐段调整：

const img = document.querySelector('.featured-image');
const paragraphs = document.querySelectorAll('.content-paragraph');

function adjustParagraphLayout() {
  // 获取图片的底部垂直位置
  const imgBottom = img.offsetTop + img.offsetHeight;
  paragraphs.forEach(p => {
    // 重置清除浮动规则，重新计算位置
    p.style.clear = 'none';
    // 获取段落的底部垂直位置
    const pBottom = p.offsetTop + p.offsetHeight;
    // 如果段落跨了图片的垂直边界（顶部在图片覆盖范围内，底部超出图片底部），就给该段落加清除浮动，整块下移
    if (p.offsetTop < imgBottom && pBottom > imgBottom) {
      p.style.clear = 'both';
    }
  })
}

// 监听视口变化实时调整布局
window.addEventListener('resize', adjustParagraphLayout);
// 页面资源加载完成后执行首次调整
window.addEventListener('load', adjustParagraphLayout);

该方案的优势是灵活度更高：哪怕视口宽度刚好让某一段跨在图片边界上，也会自动让该段整块下移，前面的段落依然保持在图片右侧的环绕位置，不会破坏原有排版，也不会出现单段被拆分的问题。

注意事项 #

• 不要给所有段落全局加clear: both，否则会直接破坏原有环绕效果，让所有段落都掉到图片下面
• 浮动图片必须设置可计算的明确高度，不要用无约束的自适应高度，否则会导致位置计算不准
• 图片和段落要放在同一个块级流容器内，不要拆分到不同的嵌套块中，否则会脱离环绕流，变成上下独立排布的结构

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