例

让图像向右侧浮动：

img

{

float:right;

}

属性定义及使用说明

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性！

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性值

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

、有float属性的元素会跑

代码：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue; float: left;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

在浏览器中的样式：

从图中可以看出，div本为块级标签，本应各自占一行，但是添加浮动属性之后，都向左浮动，跑到了一排。

二、如果上一行没有float元素，那么float元素是跑不上去的

代码：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

从图中可以看出，div1没有floa属性，所以div2不能浮动上去；而div2有浮动属性，所以div3会浮动上来。

三、有float属性的元素是脱离文档流的，非浮动元素会忽略掉前面的浮动元素

代码：<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;float:left;}

#box2{ background: red;float: left; }

#box3{background: black;width:150px;height:100px; }

在浏览器中的样式：

从图中可以看出，div1和div2浮动在文档之上，div3忽略了div1和div2，div1和div2没有影响div3的位置。