下面我将从核心思想、常用技术、经典布局模式和最佳实践四个方面,全面地为你讲解如何实现网页图文混排。

核心思想：盒模型与文档流

在开始布局之前,必须理解两个基础概念：

1. 盒模型：网页上的每一个元素（无论是文字、图片还是一个<div>）都可以看作一个矩形盒子，这个盒子由 、内边距、边框 和 外边距 四个部分组成,盒模型是所有布局的基础。
2. 文档流：这是元素在 HTML 中书写的默认排列方式，块级元素（如 <p>, <div>, <h1>）会从上到下、独占一行排列，行内元素（如 <span>, <a>）会从左到右排列,直到一行放不下才会换行。

图文混排的本质，就是使用 CSS 来改变元素在文档流中的默认行为,从而实现复杂的排列组合。

常用技术与属性

实现图文混排，主要依赖以下几种 CSS 技术，从传统到现代,各有优劣。

浮动 - 经典但已过时

浮动是早期实现图文混排最主流的方式，它可以让块级元素“浮动”起来，脱离正常的文档流，允许其他元素（如文字）环绕它。

核心属性：

• float: left; / float: right;：让元素向左或向右浮动。
• clear: both; / clear: left; / clear: right;：清除浮动,防止后续元素被其影响。

示例代码：

<div class="article">
  <img src="image.jpg" alt="示例图片" class="float-img">
  <p>这是一段需要环绕图片的文字，这是一段需要环绕图片的文字，这是一段需要环绕图片的文字，这是一段需要环绕图片的文字，这是一段需要环绕图片的文字，这是一段需要环绕图片的文字，这是一段需要环绕图片的文字，这是一段需要环绕图片的文字，这是一段需要环绕图片的文字。</p>
  <p>这是图片后面的另一段文字，它会在图片下方正常显示。</p>
</div>

.article {
  width: 600px;
  border: 1px solid #ccc;
  padding: 10px;
}
.float-img {
  float: left;
  width: 200px;
  height: 150px;
  margin-right: 15px; /* 与右侧文字的间距 */
  margin-bottom: 5px; /* 与下方文字的间距 */
}

优缺点：

• 优点：兼容性好,几乎所有浏览器都支持。
• 缺点：
  • 浮动脱离文档流，会导致父容器高度塌陷（父容器无法撑开）。
  • 需要手动清除浮动,否则会影响后续布局。
  • 布局不够灵活,响应式处理复杂。
  • 在现代开发中，已不推荐使用浮动进行布局,除非有兼容性要求。

内联块 - 简单灵活

将图片设置为 display: inline-block;，它就会像一个大的文字一样,可以被文字环绕。

核心属性：

• display: inline-block;：让元素同时具备行内元素（不独占一行）和块级元素（可设置宽高、内外边距）的特性。

示例代码：

<div class="article">
  <span class="img-wrapper">
    <img src="image.jpg" alt="示例图片">
  </span>
  <p>这是一段环绕图片的文字，这是一段环绕图片的文字，这是一段环绕图片的文字，这是一段环绕图片的文字，这是一段环绕图片的文字，这是一段环绕图片的文字，这是一段环绕图片的文字，这是一段环绕图片的文字。</p>
</div>

.article {
  width: 600px;
  font-size: 16px;
}
.img-wrapper {
  display: inline-block;
  margin-right: 10px; /* 与文字的间距 */
  vertical-align: middle; /* 垂直对齐方式，可选 top, middle, bottom */
}

优缺点：

• 优点：简单，无需脱离文档流,父容器高度不会塌陷。
• 缺点：
  • 元素之间会产生间隙，因为 HTML 中的换行符或空格会被渲染为一个空格，可以通过 font-size: 0; 来消除，但需要给子元素重新设置字体大小,比较麻烦。
  • 对齐方式（如垂直居中）需要借助 vertical-align,有时不够直观。

Flexbox (弹性布局) - 现代首选

Flexbox 是一维布局模型，非常适合在容器内对齐、分布项目，包括实现图文混排,它让布局变得极其简单和灵活。

核心概念：

• Flex 容器：设置了 display: flex; 或 display: inline-flex; 的父元素。
• Flex 项目：容器内的直接子元素（图片和文字所在的元素）。

示例代码：

<div class="article-flex">
  <img src="image.jpg" alt="示例图片" class="flex-img">
  <p class="flex-text">这是 Flexbox 实现的图文混排，文字和图片都在一个 flex 容器中，可以轻松控制它们的排列方向、对齐方式和间距，这是 Flexbox 实现的图文混排，文字和图片都在一个 flex 容器中，可以轻松控制它们的排列方向、对齐方式和间距。</p>
</div>

.article-flex {
  display: flex; /* 设置为 flex 容器 */
  align-items: center; /* 垂直方向居中对齐 */
  gap: 20px; /* 项目之间的间距，替代了 margin */
  max-width: 800px;
}
.flex-img {
  width: 200px;
  height: 150px;
  flex-shrink: 0; /* 防止图片被压缩 */
}
.flex-text {
  margin: 0; /* 文字元素自身的 margin 可以去掉 */
}

优缺点：

• 优点：
  • 布局极其灵活，可以轻松实现水平、垂直居中。
  • 没有脱离文档流,不会导致高度塌陷。
  • 处理间距非常方便，使用 gap 属性即可，无需复杂的 margin 调试。
  • 响应式能力强，可以轻松调整方向（flex-direction: column;）。
• 缺点：
  • 主要针对容器内的子元素布局，对于复杂的、跨越多行的图文混排（如报纸杂志版式），Flexbox 本身可能力不从心，需要结合 Grid。

CSS Grid (网格布局) - 强大的二维布局

CSS Grid 是一个二维布局系统，非常适合创建复杂的页面布局,包括复杂的图文混排。

核心概念：

• 网格容器：设置了 display: grid; 的父元素。
• 网格线：构成网格结构的分界线。
• 网格轨道：两条相邻网格线之间的空间,可以是行或列。
• 网格区域：由四条网格线包围的空间。

示例代码：

<div class="article-grid">
  <img src="image.jpg" alt="示例图片" class="grid-img">
  <p class="grid-text">这是 Grid 实现的图文混排，我们可以将图片和文字分别放在不同的网格区域，或者让它们跨越多个网格区域，这是 Grid 实现的图文混排，我们可以将图片和文字分别放在不同的网格区域，或者让它们跨越多个网格区域。</p>
</div>

.article-grid {
  display: grid;
  /* 定义两列：第一列固定宽度（图片列），第二列 1fr（占据剩余空间） */
  grid-template-columns: 200px 1fr; 
  gap: 20px;
  max-width: 800px;
}
.grid-img {
  grid-row: 1 / 3; /* 让图片跨越两行 */
  width: 100%;
  height: auto;
}
.grid-text {
  grid-column: 2; /* 文字放在第二列 */
  grid-row: 1; /* 文字在第一行 */
  margin: 0;
}

优缺点：

• 优点：
  • 二维布局能力,可以同时控制行和列。
  • 功能强大,可以实现非常复杂和精确的布局。
  • 代码语义清晰，通过 grid-template-areas 可以直观地描述布局结构。
• 缺点：
  • 学习曲线比 Flexbox 稍陡。
  • 对于简单的图文环绕，Grid 可能有点“杀鸡用牛刀”。

经典图文混排布局模式

结合以上技术,我们可以实现几种常见的布局模式：

最佳实践与注意事项

1. 响应式是关键：

   • 使用相对单位：图片宽度尽量用 max-width: 100%; 或 width: 100%;，配合 height: auto;,确保在小屏幕上图片不会溢出容器。
   • 使用媒体查询：在不同屏幕尺寸下切换布局模式，在手机上，将“图左文右”的布局改为“图片在上，文字在下”。

   @media (max-width: 600px) {
     .article-flex {
       flex-direction: column; /* 改为垂直排列 */
     }
   }

2. 图片优化：

   • 压缩图片，减小文件体积,提升加载速度。
   • 为 <img> 标签始终提供 alt 属性，这不仅是无障碍访问的要求,在图片加载失败时也能显示文字说明。
   • 使用 srcset 和 sizes 属性提供不同分辨率的图片,让浏览器根据屏幕尺寸和网络状况选择最合适的图片。

3. 可访问性 (Accessibility)：

   • 确保颜色对比度足够,文字清晰可读。
   • 如果图片是信息传达的关键，alt 文本必须准确描述图片内容，如果图片只是装饰性的，可以将 alt 属性设为空 alt=""。

4. 现代布局优先：

   • 优先使用 Flexbox 和 Grid，它们是现代 CSS 的基石，功能强大，代码简洁,且易于维护。
   • 除非有特殊的兼容性需求（如支持非常古老的浏览器）,否则尽量避免使用浮动进行布局。

对于绝大多数现代网页开发，Flexbox 是实现图文混排最常用、最推荐的工具，当你需要处理更复杂的、类似报纸杂志的版式时，Grid 则是你的不二之选，掌握这两种技术,你就能轻松应对绝大多数图文混排需求。