10Blogger网页架构设计之Float-- 多图像浮动的操作技巧（六）

本文详细研究多个图像一起浮动的控制效果，主要展示向右浮动，竖向对齐的操作，其实就是clear的作用，下面直入主题！

本文索引

• 第 1 步 - 没有 CSS 格式且不换行的多个图像是这样摆放的
• 第 2 步 - 多个图像都向右浮动是这个效果
• 第 3 步 - 给每个图像分别添加外边距
• 第 4 步 - 让每个图像竖向排列
• 第 5 步 - 去掉段落的上边距

None

第 1 步 - 没有 CSS 格式的多个图像是这样摆放的

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

CSS CODE
None

HTML CODE
<img src="images/1.jpg" alt="" width="100" height="100"/>
<img src="images/2.jpg" alt="" width="100" height="100"/>
<img src="images/3.jpg" alt="" width="100" height="100"/>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 2 步 - 多个图像都向右浮动是这个效果

None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

CSS CODE
.floatright {
float: right;
}

HTML CODE
<img class="floatright" src="images/1.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/2.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/3.jpg" alt="" width="100" height="100"/>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 3 步 - 给每个图像分别添加外边距

None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

CSS CODE
.floatright {
float: right;
margin: 0 0 10px 10px;
}

HTML CODE
<img class="floatright" src="images/1.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/2.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/3.jpg" alt="" width="100" height="100"/>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 4 步 - 让每个图像竖向排列

None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

CSS CODE
.floatright {
float: right;
margin: 0 0 10px 10px;
clear: right;
}

HTML CODE
<img class="floatright" src="images/1.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/2.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/3.jpg" alt="" width="100" height="100"/>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 5 步 - 去掉段落的上边距

None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

CSS CODE
.floatright {
float: right;
margin: 0 0 10px 10px;
clear: right;
}
p { margin-top: 0; }

HTML CODE
<img class="floatright" src="images/1.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/2.jpg" alt="" width="100" height="100"/>
<img class="floatright" src="images/3.jpg" alt="" width="100" height="100"/>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>

🟢 读者资源专享

这里是我从网络上收集并整理的一些免费节点资源。 如果你需要，可以通过下面的链接下载或订阅使用。

📥 V2ray / Karing / Shadowrocket

下载节点文件 预览节点

📥 Clash Verge

下载节点文件 预览节点

📥 For Shadowrocket

下载节点文件 预览节点