查看任何网页，您将看到文本内容和图像的组合。这两个元素都是网站成功的基本要素。文本内容是网站访问者将阅读的内容以及搜索引擎将用作其排名算法的一部分。图像将增加网站的视觉兴趣，并有助于突出文本内容。
向网站添加文本和图像很容易。文本添加标准HTML标记，如段落，标题和列表，而图像放在页面上 元件。但是，在将图像添加到网页后，您可能希望文本流在图像旁边，而不是在图像下方对齐（这是添加到HTML代码的图像在浏览器中呈现的默认方式）。从技术上讲，有两种方法可以实现这种外观，可以通过使用CSS（推荐）或直接将可视指令添加到HTML中（不推荐，因为您希望保持网站样式和结构的分离）。
使用CSS
改变页面文本和图像布局的方式以及它们的视觉样式在浏览器中的显示方式的正确方法是使用CSS。请记住，因为我们正在谈论页面上的视觉变化（使文本围绕图像流动），这意味着它是层叠样式表的领域。
-
首先，将您的图像添加到您的网页。请记住从该HTML中排除任何视觉特征（如宽度和高度值）。这很重要，特别是对于响应式网站，其中图像大小将根据浏览器而有所不同。某些软件（如Adobe Dreamweaver）会向使用该工具插入的图像添加宽度和高度信息，因此请务必从HTML代码中删除此信息！但是，请确保包含适当的替代文字。以下是HTML代码的外观示例：
-
出于样式目的，您还可以向图像添加类。这个类值是我们将在CSS文件中使用的值。请注意，我们在这里使用的值是任意的，但是，对于这种特定的样式，我们倾向于使用“left”或“right”的值，这取决于我们希望图像对齐的方式。我们发现这种简单的语法可以很好地工作，并且对于将来可能需要管理网站的其他人来说很容易理解，但是你可以给出任何你想要的类值。
就其本身而言，这个类值不会做任何事情。图像不会自动与文本左侧对齐。为此，我们现在需要转向我们的CSS文件。
-
在样式表中，您现在可以添加以下样式：
。剩下 {
向左飘浮;
填充：0 20px 20px 0;
}
你在这里做的是使用CSS“float”属性，它将从正常文档流（图像通常显示的方式，文本在其下方对齐）中拉出图像，并将它对齐到其容器的左侧。 HTML标记后面的文本现在环绕它。我们还添加了一些填充值，以便此文本不会直接对着图像。相反，它会有一些很好的间距，在页面的设计中具有视觉吸引力。在填充的CSS简写中，我们在图像的顶部和左侧添加了0个值，在左侧和底部添加了20个像素。请记住，您需要在左对齐图像的右侧添加一些填充。右对齐图像（我们稍后将会看到）将在其左侧应用填充。
-
如果您在浏览器中查看网页，您现在应该看到图像与页面左侧对齐，文本很好地环绕它。另一种说法是图像“浮动到左侧”。
-
如果您想要将此图像更改为右侧对齐（如本文附带的照片示例中所示），则会很简单。首先，您必须确保除了我们刚刚添加到CSS中的类型为“left”的样式之外，我们还有一个用于右对齐。它看起来像这样：
。对 {
漂浮：对;
填充：0 0 20px 20px;
}
您可以看到这与我们编写的第一个CSS几乎完全相同。唯一的区别是我们用于“float”属性的值和我们使用的填充值（在图像的左侧而不是右侧添加一些）。
-
最后，您可以在HTML中将图像类的值从“左”更改为“右”：
-
现在在浏览器中查看您的页面，您的图像应该右侧对齐，文本整齐地环绕它。我们倾向于在所有样式表中添加这些样式，“左”和“右”，以便在创建网页时根据需要使用这些视觉样式。这两种样式变得很好，可重复使用的功能，我们可以在需要使用文本环绕图像进行样式设置时转向这些功能。
使用HTML而不是CSS（以及为什么你不应该这样做）
尽管可以使用HTML在图像上包装文本，但Web标准规定CSS（以及上面介绍的步骤）是要走的路，以便我们可以保持结构（HTML）和样式（CSS）的分离。对于某些设备和布局，当您考虑该文本时，这一点尤为重要 不得 需要在图像周围流动。对于较小的屏幕，响应式网站的布局可能要求文本确实在图像下方对齐，并且图像拉伸屏幕的整个宽度。如果您的样式与HTML标记分开，则可以使用媒体查询轻松完成此操作。在当今的多设备世界中，图像和文本对于不同的访问者和不同的屏幕将以不同的方式显示，这种分离对于网页的长期成功和管理至关重要。
