1、首先，在计算机桌面上创建一个新文件夹，然后在该文件夹中创建一个新的文本文档。
2、然后双击打开带有记事本的文本文档，如下图所示，我们编写一个简单的html代码。3、单击“另存为”的功能选项，显示默认保存为编码为ANSI。4、我们将更改编码和文件名，将其更改为如图所示的图像并保存。5、然后返回到新创建的文件夹，发现有一个额外的html文件。6、最后，使用浏览器打开html文件，效果如图所示，简单的网页被成功编写。
要实现html文字浮动效果光靠HTML 是不够的还要加上CSS组合一起才行。
要用div float
float语法：
float : none | left |right
float 的基本属性
none：不进行浮动（默认）
left：浮动在其所在的块容器左侧
right：浮动在其所在的块容器右侧
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div css 设定浮动</title>
<style>
/*设定div 的盒子大小*/
div
{
width:120px;
margin:0 0 25px 30px;
padding:15px;
border:1px solid black;
text-align:center;
}
/* 设定 盒子在右边浮动*/
.float-right {
float:right;
}
</style>
</head>
<body>
<div>1</div>
<div class=" float-right">盒子浮动在右边 2</div>
<div>3</div>
</body>
</html>
用代码的方式，给图片上标上文字，小编这里使用定位的方法，将文字定位到想要的任意位置。
1、在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字。
2、在CSS中对文字图片进行简单样式添加。
3、效果如图所示；大盒子使用描边显示，里面包含了图片和下面的文字。
4、想要将文字弄到画面上去，这时候需要对header添加相对定位，对文字标签p添加绝对定位。
5、对文字添加了绝对定位后，如图效果，然后就需要对其设置下位置关系了。
6、位置关系通常就是top bottom left right 上下左右四个方向了。
7、定位到右上方位置，最后效果就是这样了。
