CSS图文混排：实现优雅的网页内容布局

CSS图文混排是网页设计中常见的布局技术，通过CSS的各种属性和方法，可以实现文字与图片的灵活排列组合，创造出美观且富有视觉层次感的页面效果。

图文混排基础技术

浮动是最传统的图文混排方式，通过float属性让图片脱离文档流并向左或右浮动：

img {
  float: left; /* 或 right */
  margin: 0 15px 15px 0; /* 添加外边距避免文字紧贴图片 */
}

现代CSS提供了更精细的文本环绕控制

.circle-img {
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
}

Flexbox非常适合创建响应式的图文混排：

.container {
  display: flex;
  align-items: center;
  gap: 20px;
}

CSS Grid提供了更强大的二维布局能力：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.text-wrap {
  text-align: justify;
  hyphens: auto;
  padding: 15px;
}

.align-center {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .responsive-img {
    float: none;
    display: block;
    margin: 0 auto;
  }
}