一、定義
css中有一個float屬性，他的屬性值：
none : 默認屬性，未定義float時，即為none，也就是標准流通常的情況
left : 左浮動，元素會向其父級的左側靠緊，同時，元素本身的寬度不再伸展，而根據元素內部的內容的寬度來確定
right : 右浮動，元素會身其父級的右側靠緊，同時，跟左浮動一樣，元素本身的寬度不再伸展，而根據元素內部的內容的寬度來確定
二、通過實例看原理
首先，我先了寫這樣一段代碼，用來作為實驗用：
css:
1 .wrap{border:1px solid #f00; padding:5px;} 2 .box-1{border:2px dotted #0f0; background:#ccc;} 3 .box-2{border:2px dotted #00f; background:#ccc;} 4 .box-3{border:2px dotted #0ff; background:#ccc;} 5 .text{border:2px dotted #000; background:#eee;}
html:
1 <div class="wrap"> 2 <div class="box-1">box-1</div> 3 <div class="box-2">box-2</div> 4 <div class="box-3">box-3</div> 5 <p class="text">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p> 6 </div>
在瀏覽器中的表現:
現在實驗開始，我先給box-1加個float:left;屬性，則在瀏覽中的表現形式為：
這里有個很關健的地方，就是我們要先確定box-1和box-2兩個div之間的位置關系，其實，此處由於box-1設了float:left；所以box-2自動頂替原先box-1所占位置，並且box-2的文字環繞住box-1，也就是說，類似於box-1蓋在了box-2上面，且使box-2的文字環繞box-1元素，如果到這里還不清楚，我們可以再給box-2加個float:left,在瀏覽器中的表現形式為：
可以發現，由於box-2設置了float:left,所以box-3頂替了原來box-2的位置，並使自己的文字環繞box-2，如果我們再給box-3也設個float:left，也會產生相同的效果，即：
有人可能會認為后面的原素並沒有頂替掉box-3的位置，而是向下偏移了一段距離，這其實是下面元素本身的問題，因為下面的元素是個p標簽，而p標簽本身表示段落的意思，他是有默認的margin值的，所以，只要給p設置一個 margin:0; 就會回歸到我們想像中的樣子，如圖:
同理，float:right，也是相同的原理，大家若有興趣可以自己驗證一下