【笔记】浮动属性float的应用01——将图像浮动到右侧

最新推荐文章于 2025-05-26 20:21:04 发布

二木成林

最新推荐文章于 2025-05-26 20:21:04 发布

阅读量1.5k

点赞数 1

分类专栏：笔记

笔记专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了如何使用CSS将图像浮动到页面右侧，并通过添加边距、边框和填充来优化布局。通过逐步示例，读者可以学习如何控制网页元素的位置和外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

对于本练习，我们希望将图像强制到右侧以允许内容与其一起流动。我们还想在图像的左侧和底侧添加边距以推送内容。最后，我们想在图像周围添加边框。我们从一段文本中的图像开始。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">	</style>
</head>
<body>
	<p>
	<img src="images/healthy.jpg" alt="" width="100" height="100">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 exercation tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat。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>
</body>
</html>

效果图如下：

第2步 - 将浮动：向右移动到图像

要将图像强制移动到右边缘，使用类选择器将“float：right”应用于图像。在这种情况下，类的名称是“.floatright”以帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。

在这种情况下不需要宽度，因为图像具有固有宽度。如果这是一个div，则必须使用宽度。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;
		}
	</style>
</head>
<body>
	<p>
	<img class="floatRight" src="images/healthy.jpg" alt="" width="100" height="100">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 exercation tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat。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>
</body>
</html>

效果图如下：

第3步 - 添加保证金

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

我们在这里使用简写规则：“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>
	<p>
	<img class="floatRight" src="images/healthy.jpg" alt="" width="100" height="100">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 exercation tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat。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>
</body>
</html>

效果图如下：

第4步 - 添加边框

要为图像添加边框，请使用“border：1px solid＃666;”。同样，Netscape 4不喜欢这个规则，所以它应该使用“ @import ” 隐藏在浏览器中。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;
			margin:0 0 10px 10px;
			border:3px solid #ff0000;/*new codes*/
		}
	</style>
</head>
<body>
	<p>
	<img class="floatRight" src="images/healthy.jpg" alt="" width="100" height="100">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 exercation tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat。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>
</body>
</html>

效果图如下：

第5步 - 添加填充

如果您希望边框稍微偏离图像边缘，请使用填充。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.floatRight {
			float:right;
			margin:0 0 10px 10px;
			border:3px solid #ff0000;
			padding:3px;/*new codes*/
		}
	</style>
</head>
<body>
	<p>
	<img class="floatRight" src="images/healthy.jpg" alt="" width="100" height="100">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 exercation tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat。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>
</body>
</html>

效果图如下：