实现效果如下，DIV2在div1的左方，其它代码不变，我们只需要把浮动的代码更改一下，就可以实现右浮动了，floatright下图实际效果我们可以看到DIV实现了右浮动，浮动至右边css浮动扩展定义 浮动的框可以向左或向右移动。

1首先新建一个html文件，命名为testhtml2在testhtml文件内，使用p标签创建两行文字，代码如下3在testhtml文件内，设置第一个p标签id属性为mp，主要用于下面使用css设置该p元素隐藏4在testhtml文件内。

完美的封装了popUpBox这个类 这个类一共两个公开方法 show 显示 hidden 隐藏 其他功能请自行扩展 不敢保证简单，但每一行都写了注释 lt！DOCTYPE htmlCSS 点击文字或按钮打开div浮动层 function popUpBox创建。

我是左侧浮动窗口的内容 我是右侧浮动窗口的内容CSS代码body * * 为body标签设置背景仅仅是为了演示效果 * 与浮动窗口本身无关 * backgroundcolor #ccc#left， #right position。

这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码clearboth此方法的弊端在于增加了无意义的结构元素对于使用额外标签清除浮动闭合浮动元素，是W3C推荐的做法。

不清除浮动的话，浮动层后面的非浮动内容就有可能被浮动层所覆盖，造成版面错乱，所以必须清除浮动除非浮动层所在的位置是有固定的高度的，也就是说不管是否浮动它所占用的区域都不变，这样就无需清除比如 可以看到。

Floatleft 靠左浮动Floatright 靠右浮动clearboth清除浮动，简单举例如下CSS样式如下box1 floatleft width200px height300px background#f00* 设置div对象浮动靠左* box2 floatrightwidth。

清除浮动并不是指清除浮动元素本身的浮动，而是在浮动元素的外面前面或后面进行清除，也就是清除浮动元素对其他后续元素的影响浮动元素相当于漂浮在空中，那么它原来在地面所占用的位置就被收回了，后面的其他元素就会自动。

2li标签设置浮动时，图片会重叠，无法排成一列浮动必须落实到图片3小照片放在span标签中，变成了内联元素需为其添加quotdisplay blockquot转换为块级元素，才能设置图片外边距以下是代码html view plain copy。

表示向左浮动，比如多个div在一个页面上，默认情况是一行一个div，但是只要在div的css中使用floatleft，可以使一行有多个div，这样可以把网页划分成很多块，但是使用该属性会影响后面的元素，所有如果后面的div不想再被。

给div加上css样式，分别给他们设置背景颜色，父div可以不设置，子div设置绿色，然后给div加上浮动代码即可，quotfloatleftquot我们来写一下代码下面我们来看一下运行效果 DIV是层叠样式表中的定位技术，全称DIVision，即为划分。