不修改HTML仅用CSS实现div旁文本环绕布局的方法

你之前给绿色方块加的position: absolute会让元素完全脱离正常文档流，后续黄色块的文本感知不到这个绿色方块的位置，根本不可能实现绕排效果。这个场景按提示用浮动实现即可，不需要改原有HTML结构，仅调整CSS属性就能达到目标效果：

• 删除绿色方块的绝对定位属性，改为左浮动
• 给底部蓝色方块添加清除浮动属性，避免浮动导致蓝色块位置错位

修改后的完整CSS代码：

.content5 {
  position: relative;
}
.red5 { 
  width: 100%; 
  height: 100px; 
  background-color: red; 
} 
.green5 { 
  width: 100px; 
  height: 100px; 
  background-color: green; 
  float: left;
  /* 可选：加外边距避免文字紧贴绿块，可按需调整数值 */
  /* margin: 0 12px 12px 0; */
} 
.yellow5 {
  width: 100%; 
  height: auto; 
  background-color: gold; 
  /* 可选：加内边距优化文本可读性 */
  /* padding: 12px; */
} 
.blue5 {
  width: 100%; 
  height: 100px; 
  background-color: blue; 
  clear: both;
}

最终呈现效果 #

• 红色块全宽显示在最顶部，高度100px
• 绿色100px见方块紧贴红色块下沿，靠左排列
• 黄色块的金色背景铺满对应区域，文本自动环绕在绿色方块右侧，文本长度超过绿色方块高度后自动占满全宽显示
• 蓝色块全宽显示在最底部，高度100px，不会被浮动元素挤压位置

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