第1步 - 从一段文字和一张图片开始
对于本练习，我们希望将图像强制到右侧以允许内容与其一起流动。我们还想在图像下面有一个标题。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css"> </style>
</head>
<body>
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
<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 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步 - 添加div图像和标题
第一个修改是HTML代码。在图像和标题周围添加div。在这种情况下，我们还在div中添加了一个类选择器。我们使用“floatright”来帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="floatRight" ><!--new codes-->
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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步 - 将“float：right”和宽度应用于div
将“float：right”应用于div。这将强制div到其包含框的右边缘。浮动元素时也需要宽度 - 除非它是图像。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {/*new codes*/
float:right;
width:100px;
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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步 - 将保证金应用于div
可以添加边距以将内容从包含图像和标题的div的左侧和底侧推开。
Netscape 4严重误解了利润率。要隐藏此浏览器的边距，但允许它们由符合标准的浏览器应用，请将边距规则放在单独的样式表中，并使用“ @import ”将样式表链接到html页面。
我们在这里使用简写规则：“margin：0 0 10px 10px;”。请记住，速记值按顺时针顺序应用; 顶部，右侧，底部，左侧。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
width:100px;
margin:0 0 10px 10px;/*new codes*/
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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步 - 添加背景颜色
您可以添加背景颜色，使图像和标题从整个页面中脱颖而出。正如您所看到的，除了标题之外，它不会显示在页面上。通过向div添加一些填充来解决此问题。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
width:100px;
margin:0 0 10px 10px;
background-color:#dddddd;/*new codes*/
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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>效果图如下：
第6步 - 添加填充
您可以向div添加一些填充以扩展背景颜色。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float: right;
width: 100px;
margin: 0 0 10px 10px;
background-color: #ddd;
padding:10px;/*new codes*/
}
</style>
</head>
<body>
<div class="floatRight">
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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>效果图如下：
第7步 - 为div添加边框
要为div添加边框，请使用“border：1px solid＃666;”。同样，Netscape 4不喜欢这个规则，所以它应该使用“ @import ” 隐藏在浏览器中。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
width:100px;
margin:0 0 10px 10px;
background-color:#dddddd;
padding:10px;
border:1px solid #666;/*new codes*/
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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>效果图如下：
第8步 - 为图像添加边框
要为图像添加边框，可以使用“后代选择器”规则。图像和标题位于div内部，因此它们是div的后代。这意味着您可以使用规则“div img”来定位图像。此规则的问题在于它将以任何div内的任何图像为目标。
更具体地说，我们可以使用“div.floatright img {border：1px solid #ddd;}”缩小选择范围。这将针对使用“floatright”类设置样式的div内的任何图像。
由于图像两侧的边框为1px，因此div的宽度应从100px更改为102px（100px图像，1px左边距，1px右边距= 102px）。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
width:102px;/*new codes*/
margin:0 0 10px 10px;
background-color:#dddddd;
padding:10px;
border:1px solid #666;
}
.floatRight img {
border:1px solid red;/*new codes*/
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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>效果图如下：
第9步 - 删除段落上的margin-top
您可能已经注意到文本段落的顶部和包含图像的div没有对齐。这是由于段落顶部的余量。
非样式段落的顶部和底部通常有1em边距 - 相当于一行文本。如果要删除此边距，请使用“p {margin-top：0;}”。应用时，段落和div将垂直对齐（见下文）。
这会影响页面上的段落，使它们直接相互运行吗？答案是不。如上所述，段落的顶部和底部有1em边距。如果删除了上边距，则只会影响容器内的第一个段落。所有其他段落仍将通过底部边距分隔到1em的高度。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
width:102px;
margin:0 0 10px 10px;
background-color:#dddddd;
padding:10px;
border:1px solid #666;
}
.floatRight img {
border:1px solid red;
}
p {
margin-top:0;/*new codes*/
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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>效果图如下：
第10步 - 玩边框
您可以在div和图像上使用边框颜色来创建不同的效果。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatRight {
float:right;
width:103px;/*new codes*/
margin:0 0 10px 10px;
background-color:#dddddd;
padding:10px;
border-top:1px solid #999;/*new codes*/
border-right:2px solid #555;/*new codes*/
border-bottom:2px solid #555;/*new codes*/
border-left:1px solid #999;/*new codes*/
}
.floatRight img {
border-top:2px solid #555;/*new codes*/
border-right:1px solid #999;/*new codes*/
border-bottom:1px solid #999;/*new codes*/
border-left:2px solid #555;/*new codes*/
}
p {
margin-top:0;
}
</style>
</head>
<body>
<div class="floatRight" >
<img src="images/healthy.jpg" alt="" width="100" height="100"><br />
标题在这里
</div>
<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 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>效果图如下：
