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