1、准备一张图片，新建一个空白html文件
2、其中html文件内容如下图所示，html中包含了一张图片，及对应的描述段落
3、给html添加head标签，在标签中定义样式。
<style>
p {border:1px solid red}
img {float:leftmargin:0 5px 5px 0}
</style>
4、用chrome浏览器打开上面的html文件，可以看到文字绕排效果
5、由于在引入图片时我们用到的语句是<img src="Penguins.jpg" style="width: 50%height:auto"/>，这表明图片的大小是会随着浏览器窗口的大小调整而自动调整的。
6、所以当放大或缩小浏览器窗口时，环绕效果会跟随着变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px
height: 250px
background-color: red
text-align: center
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
<br/>
你啥时候嫁给我,hahahahaahahahahahaah
</div>
</body>
</html>
————————————————
这样就会能够将文字放在图片的正下方，得到以下图片：
文字位于正右边的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px
height: 250px
background-color: red
}
.d2{
vertical-align: middle
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
你啥时候嫁给我
</div>
</body>
</html>
HTML图片和文字是并列显示的。如下：
1. 将文字浮在图片上我们加个div把图片和文字包在一起，并且加上img-group和img-tip这两个class，便于后面的处理。
我们要让文字浮在图片上面，需要加上定位。看文字浮在了图片的底部。
display: inline-block与定位无关，只是使整个.img-group长宽与图片适应。
2. 文字与背景处理文字左对齐，我们把文字居中。给.img-tip添加如下代码：
文字不清楚，我们加上背景和字体颜色，并适当的设置一下透明。给.img-tip添加如下代码：
3. 鼠标悬浮特效现在静态效果已经完成了，接下来，加一下鼠标悬浮出现文本的效果，现在.img-tip添加如下代码，让文本默认隐藏：
再加上鼠标悬停在图片上，显示文本的代码：
代码总汇HTML
<div class="img-group"> <img src="img/snow.png">
<div class="img-tip">我是雪豹</div></div>
CSS
.img-group { position: relative display: inline-block
}
.img-tip { position: absolute bottom: 0 background: #333 color: #fff opacity: 0.6 display: none
}
.img-group:hover .img-tip { display: block width: 100% text-align: center
}
