HTML元素的float（浮動）屬性

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