前军教程网

一、有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的位置。