【笔记】浮动属性float的应用03——浮动一系列“清晰：右”图像（所有步骤一起结合）

第1步 - 从一段文字和一系列图片开始

对于本练习，我们希望将图像强制到右侧以允许内容与它们一起流动。我们还想在图像的左侧和底侧添加边距以推送内容。我们还希望图像在右边缘上方堆叠在一起。

类选择器 - “floatright” - 已应用于每个图像。这里可以使用任何名称。

第2步 - 将浮动：应用于图像

要将图像强制移到右边缘，“float：right”将应用于类选择器。在这种情况下不需要宽度，因为图像具有固有宽度。如果这是一个div，则必须使用宽度。

.floatright { float: right; }

第3步 - 添加保证金

可以添加边距以将内容推离图像的左侧和底侧。

如果Netscape 4是目标浏览器，则应使用简写规则（例如“margin-left：20px;”和“margin-bottom：20px;”），因为此浏览器严重误解了与边距相关的速记规则。

如果符合标准的浏览器是目标，并且边界规则对Netscape 4隐藏（使用“ @import ”），则可以使用单个速记规则 - “margin：0 0 10px 10px;”。

请记住，速记值按顺时针顺序应用; 顶部，右侧，底部，左侧。

margin: 0 0 10px 10px;

第4步 - 添加“清除：正确”

要使图像堆叠在一起，必须将“清除”权限应用于“floatright”选择器。这将强制每个图像在源文档中较早的任何右浮动图像的底部外边缘下方移动。

clear: right;

第5步 - 删除段落上的margin-top

您可能已经注意到文本段落的顶部和“float：right”图像没有对齐。这是由于段落顶部的余量。

非样式段落的顶部和底部通常有1em边距 - 相当于一行文本。如果要删除此边距，请使用“p {margin-top：0;}”。应用时，段落和div将垂直对齐（见下文）。

这会影响页面上的段落，使它们直接相互运行吗？答案是不。如上所述，段落的顶部和底部有1em边距。如果删除了上边距，则只会影响容器内的第一个段落。所有其他段落仍将通过底部边距分隔到1em的高度。

p { margin-top: 0; }

完了！

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;
			margin:0 0 10px 10px;
			clear:right;
		}
		p {
			margin-top:0;
		}
	</style>
</head>
<body>
	<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
	<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
	<img class="floatRight" src="images/healthy.jpg" alt="" wdith="60" height="60" />
	<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
	</p>
	<p>
		Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
	</p>
</body>
</html>

效果图如下：