2、css代码片段：

1. .divcss5{ width:400px;padding:10px;border:1px solid #F00} 
2. .divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
3. .divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
4. .clear{ clear:both} 

3、效果截图

css div浮动float用法应用案例截图

四、css+div浮动其它应用案例（休息阅读）   -   TOP

DIV CSS实验一
Css样式实例内容，我们让文字和图片在一个固定宽度div层内，让蓝色背景文字内容居右，小图片居左。
www.divcss5.com CSS案例演示最终效果图如下

1、首先我们设置一个最外层的宽度为300px，高度为200px的css命名为box的css选择器代码如下（知识点px是什么意思）
.box{width:300px; height:200px;}

2、设置box内的文字内容部分css样式命名为yangshi，并设置背景为蓝色，宽度为120px，居右浮动
.yangshi{ width:120px; float:right; background:#0066FF;}

3、设置图片居左浮动div+css样式
img { float: left;}

4、body内的div布局，代码如下

 

我是www.divcss5.com 网站，测试内容

说明：这里img标签是链接外部图片，图片名为demo.gif

最终演示结果截图

CSS实验二
接下来我们演示使用div+css让这里小图片居右（上个例子是居左），蓝色背景文字内容区居左（上个例子是居右）(扩展css 居中)。这里我们只需要改变yangshi的float:right;为float:left和图片css样式img { float: left;}为img { float: right;}
CSS代码如下：

html中的css代码和内容不变
最终演示结果截图如下：
 

五、css浮动总结   -   TOP

我们要区别与文字内容靠左( text-align:left)靠右( text-align:right)样式，浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中（浮动居中）的样式，如果需要让标签对象居中我们在css布局居中相关文字给大家详细讲解介绍（css margin）。这里记住浮动靠右使用float:right，浮动靠左使用float:left样式即可。