【笔记】浮动属性float的应用03——浮动一系列“清晰：右”图像

最新推荐文章于 2021-02-01 14:42:53 发布

二木成林

最新推荐文章于 2021-02-01 14:42:53 发布

阅读量300

点赞数

分类专栏：笔记

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

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

类选择器已应用于每个图像。我们使用名称“floatright”来帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">

	</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>

效果图如下：

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

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

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;/*new codes*/
		}
	</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>

效果图如下：

第3步 - 添加保证金

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

Netscape 4严重误解了利润率。要隐藏此浏览器的边距，但允许它们由符合标准的浏览器应用，请将边距规则放在单独的样式表中，并使用“ @import ”将样式表链接到html页面。

我们在这里使用简写规则：“margin：0 0 10px 10px;”。请记住，速记值按顺时针顺序应用; 顶部，右侧，底部，左侧。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;
			margin:0 0 10px 10px;/*new codes*/
		}
	</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>

效果图如下：

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

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

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;
			margin:0 0 10px 10px;
			clear:right;/*new codes*/
		}
	</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>

效果图如下：

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

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

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

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

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;
			margin:0 0 10px 10px;
			clear:right;
		}
		p {
			margin-top:0;/*new codes*/
		}
	</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>

效果图如下：

二木成林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【笔记】浮动属性float的应用03——浮动一系列“清晰：右”图像

第1步 - 从一段文字和一系列图片开始对于本练习，我们希望将图像强制到右侧以允许内容与它们一起流动。我们还想在图像的左侧和底侧添加边距以推送内容。我们还希望图像在右边缘上方堆叠在一起。类选择器已应用于每个图像。我们使用名称“floatright”来帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。代码如下所示：&lt;!DOCTYPE htm...
复制链接

扫一扫