<div style="clear:both;"></div>

浮動(dòng)浮動(dòng)顧名思義就是浮動(dòng)在了正常的流上，當(dāng)內(nèi)聯(lián)元素遇到浮動(dòng)元素時(shí)就會(huì)環(huán)繞著他，所以那個(gè)文字就卡在了浮動(dòng)元素邊界下方

被覆蓋了

為什么設(shè)置欄目1向右浮動(dòng)時(shí)則直接向右偏移，而欄目2（包括文字）占據(jù)原先欄目1的位置？

因?yàn)?div1{float:right} 會(huì)使欄目1脫離文檔流并且向右移動(dòng);

這時(shí)由于浮動(dòng)框(欄目1)不在文檔的普通流中，所以文檔的普通流中的塊框(欄目2)表現(xiàn)得就像浮動(dòng)框(欄目1)不存在一樣。

因此欄目2（包括文字）會(huì)占據(jù)原先欄目1的位置.

_____________________________________________________________________________________________

為什么#div1{float:left} 時(shí), 欄目2 的文字會(huì)環(huán)繞在欄目1下面.這個(gè)我也不清楚 = =

希望大佬們可以解惑!

________________________________________________________________________________________________

不好意思我也是小白,理解的不知道對(duì)不對(duì).

主要參考了W3的CSS 浮動(dòng) 章節(jié).

按你寫(xiě)的#div1{float:left} 這個(gè)時(shí)候：

當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。

因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。

再理解一下float的含義：

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。