寻求纯CSS方案：文本在float元素旁自适应垂直居中与换行

要实现短文本时与浮动元素垂直居中对齐，长文本时自动换行至浮动元素下方的效果，无需JavaScript，可以利用**CSS容器查询（Container Queries）**实现动态布局切换，以下是具体方案：

核心思路 #

通过容器查询判断父容器的高度是否小于等于浮动元素的高度：

• 当容器高度 ≤ 浮动元素高度（文本较短）：让文本与浮动元素垂直居中
• 当容器高度 > 浮动元素高度（文本较长）：恢复正常的浮动环绕布局，文本顶部对齐并自动换行

代码实现 #

<div class="container">
  <div class="float-element">浮动元素</div>
  <div class="text-content">
    <!-- 这里可以替换为动态文本内容 -->
    短文本时居中，长文本时换行到下方。短文本时居中，长文本时换行到下方。短文本时居中，长文本时换行到下方。
  </div>
</div>

/* 定义浮动元素高度的CSS变量，方便统一调整 */
:root {
  --float-height: 80px;
}

.container {
  /* 启用容器查询，允许基于容器尺寸应用样式 */
  container-type: size;
  overflow: hidden; /* 建立BFC，确保容器包含浮动元素 */
  margin: 1rem 0;
}

.float-element {
  float: left;
  width: 80px;
  min-height: var(--float-height);
  background: #e0e0e0;
  margin-right: 12px;
  /* 让浮动元素内部内容居中（可选） */
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-content {
  display: inline-block;
  vertical-align: top; /* 默认顶部对齐，适配长文本环绕场景 */
  line-height: 1.5;
}

/* 容器高度小于等于浮动元素高度时，切换为垂直居中 */
@container (height <= var(--float-height)) {
  .text-content {
    vertical-align: middle;
  }
  /* 用伪元素撑起容器高度，实现文本垂直居中 */
  .container::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* 消除inline-block元素间的空白间隙 */
  }
}

说明 #

1. 兼容性：容器查询目前支持Chrome 105+、Firefox 110+、Safari 16.4+，如果需要兼容旧浏览器，可能需要降级方案（如JavaScript辅助），但现代浏览器环境下可完全纯CSS实现。
2. 无硬编码高度：通过CSS变量--float-height统一控制浮动元素的高度，无需在多个地方重复修改；如果浮动元素高度由内容自适应，可将min-height改为height: auto，并手动调整--float-height为对应内容高度。
3. BFC的作用：父容器设置overflow: hidden建立块级格式化上下文，避免浮动元素脱离文档流导致容器高度塌陷。

替代方案（兼容旧浏览器） #

如果必须兼容不支持容器查询的浏览器，可采用「伪元素+inline-block」的方案，但长文本时文本会整体垂直居中（而非环绕浮动元素），仅适合对长文本布局要求不严格的场景：

.container {
  overflow: hidden;
}

.float-element {
  float: left;
  width: 80px;
  min-height: 80px;
  background: #e0e0e0;
  margin-right: 12px;
  display: inline-block;
  vertical-align: middle;
}

.text-content {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.5;
}

.container::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

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