新建一个html网页，在body中插入【<div class="content"></div>】并引入CSS【.content{width: 420pxheight: 100pxbackground: #d4d4d4padding: 5px 0 5px 5px}】。
请点击输入图片描述
在大DIV中插入一个DIV【<div class="a"></div>】并引入CSS【.a{width: 100pxheight: 100pxmargin-right: 5pxbackground: #ff0000}】定义它的高，宽，外边距，背景色。
请点击输入图片描述
继续添加一个同级的DIV【<div class="a b"></div>】并引入样式a和样式b，样式B只定义背景色【.b{background: #FF5F00}】。可以看到第2个DIV排到了第一个的下方位置。
请点击输入图片描述
按照同样的方法再添加2个同级的DIV并引入不同颜色的DIV【<div class="a c"></div><div class="a d"></div>】。然后引入CSS【.c{background: #FFED00}.d{background: #00FF93}】。刷新后可以看到预览效果是4个IDV垂直排列的，怎么能让他们水平排列在一行呢？
请点击输入图片描述
为了方便朋友们查看顺序，把4个DIV分别插入一个数字，相当于给他们编一个号码。
请点击输入图片描述
接下来就要用到浮动代码了。在4个DIV共用的a样式中，加入左浮动【float: left】。保存并刷新网页可以看到已经都在一行上了，而且是按照编码顺序从左到右排列的。
请点击输入图片描述
我们再来试一下右浮动【float:right】，可以看到DIV是从右向左排列的。现在朋友们知道怎么使用浮动代码了吗？
请点击输入图片描述
1、使用css中的flaot属性就可以了，首先打开Dreamweaver，创建html文件：2、然后先给页面设置背景颜色，创建段落两个段落，段落上面设置2张图片的float属性，分别让它们左右浮动，值为left和right，最后打开浏览器：
3、打开浏览器后即可看到效果，两张图片分别浮动在文本的左右两边，文字则是围绕在图片周围.。
浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容。浮动框架可以插入在页面中的任意位置。浮动框架需要用手写代码的方式来实现。
1、浮动框架基本原理及使用方法
如果需要在页面中创建一个浮动框架，需要先制作好页面的其他内容，再在页面中以手写代码的方式插入浮动框架的代码，浮动框架的代码如下所示。
<IFrame src="File-URL" HEIGHT=value width=value NAME="IFRAME-name"Align="value">
</IFrame>
其属性含义如下：
SRC：浮动框架中显示页面的源文件的路径和文件名。
Width：浮动框架的宽度。
Height：浮动框架的高度。
Name：浮动框架的名称。
Align：浮动框架的排列方式，可以取三个值：Left （表示居左）、Cener（表示居中）、Right（表示居右）。
FrameBorder：框架边框显示属性（同普通框架）。
FrameSpacing：框架边框宽度属性（同普通框架）。
Scrolling：框架滚动条显示属性（同普通框架）。
NOResize：框架大小调整属性（同普通框架）。
BorderColor：框架边框颜色属性（同普通框架）。
MarginWidth：框架边缘宽度属性（同普通框架）。
MarginHeight：框架边缘高度属性（同普通框架）。
2、浮动框架的链接
在浮动框架中，也可以制作页面之间的链接。创建链接的方式同样是先用name属性为浮动框架命名，再将链接的目标浏览器窗口指向命名的浮动框架。只是指向目标的时候，不能可视化操作，需要编写代码执行
例如：建立浮动框架网页
（1）在“xin126”文件夹下创建网页文件“xin126.html”。
（2）在网页中插入浮动框架，代码如下：
<IFrame src="index.htm" HEIGHT=800 width=800 NAME="xin126"
Align="center">
表示在页面中插入一个宽800，高800，框架名为“xin126”，居于浏览器中间对齐的浮动框架。
（3）编辑网页其他部分，完成后网页代码如下：
<head><meta http-equiv="Content-Type" content="text/html charset=utf-8" /><title>浮动框架与链接架</title></head><body><IFrame src="index.htm" HEIGHT=800 width=800 NAME="xin126"Align="center"></IFrame><center><a href="main.htm" target="xin126">main</a><br><a href="xbjs.htm" target="xin126">系部介绍</a><br><a href="zyjs.htm" target="xin126">专业介绍</a></center></body></html>（4）保存并预览网页。
