1、首先，制作一个简单的HTML页面，找到父级元素，将父级元素添加上边框；
2、然后，将父级元素添加上边框后，发现父级元素没有被子元素的高度所撑开，保持标签的高度；
3、在HTML页面上，将最后一个浮动元素的后面添加上div，设置其类型为clearboth；
4、设置完成后，将浮动元素的父级元素添加上伪类，添加成功后，HTML即可清除浮动。
新建一个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是从右向左排列的。现在朋友们知道怎么使用浮动代码了吗？
请点击输入图片描述
问题分析：
HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。
举例如下：
在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。
HTML代码：
<div id="left"><p>我是左侧浮动窗口的内容</p>
</div>
<div id="right">
<p>我是右侧浮动窗口的内容</p>
</div>
CSS代码：
body{/*
* 为body标签设置背景仅仅是为了演示效果。
* 与浮动窗口本身无关。
*/
background-color: #ccc
}
#left, #right{
position: fixed
top: 100px
width: 200px
height: 500px
line-height: 500px
text-align: center
border: 1px solid #000
background-color: #FFF
}
#left{
left: 50px
}
#right{
right: 50px
}
页面初始化效果：
