如何在存在float元素时实现元素垂直居中并环绕排列

首先修正HTML中的拼写错误：将所有clss改为class，否则样式无法生效。

方案一：基于浮动的实现（兼容旧浏览器） #

保留浮动布局，调整右侧描述块的样式，使其环绕浮动元素并垂直居中：

.parent {
  border: 1px red solid;
  /* 用overflow:hidden清除浮动，也可以保留原有的clearfix写法 */
  overflow: hidden;
}

.left-child {
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
  float: left;
  margin-right: 1rem; /* 添加间距提升美观度 */
}

.right-child {
  display: inline-block;
  width: calc(60vw - 1rem); /* 适配父容器宽度，减去左侧间距 */
  margin-bottom: 1rem;
  vertical-align: middle; /* 与左侧浮动元素垂直居中对齐 */
  /* 让块内文字垂直居中 */
  display: flex;
  align-items: center;
  min-height: 60px; /* 设置最小高度，避免内容过少时无法体现居中效果 */
  border: 1px blue solid; /* 可选：用于可视化块范围 */
}

<div class="parent">
  <div class="left-child"></div>
  <div class="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="right-child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

方案二：CSS Grid实现（现代布局方案） #

放弃浮动，使用更灵活的Grid布局，轻松实现垂直居中和环绕排列：

.parent {
  border: 1px red solid;
  display: grid;
  grid-template-columns: 40vw 1fr; /* 左侧固定宽度，右侧自适应 */
  gap: 1rem; /* 元素间间距 */
}

.left-child {
  grid-row: 1 / span 3; /* 左侧元素跨3行，对应3个描述块 */
  width: 40vw;
  height: 40vw;
  border: 1px red solid;
}

.right-child {
  display: flex;
  align-items: center; /* 块内文字垂直居中 */
  border: 1px blue solid; /* 可选：用于可视化块范围 */
}

HTML部分保持修正后的结构即可。

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