在前面我們介紹了文檔流的概念，接下來我們將要介紹浮動(dòng)。通過設(shè)置元素的浮動(dòng)屬性，我們可以讓元素脫離文檔流，從而實(shí)現(xiàn)一些特殊的浮動(dòng)效果。浮動(dòng)屬性的取值有l(wèi)eft、right、none和inherit。

在前面我們介紹了文檔流的概念，接下來我們將要介紹浮動(dòng)。通過設(shè)置元素的浮動(dòng)屬性，我們可以讓元素脫離文檔流，從而實(shí)現(xiàn)一些特殊的浮動(dòng)效果。浮動(dòng)屬性的取值有l(wèi)eft、right、none和inherit。

新建HTML文件

首先，我們需要新建一個(gè)記事本文件，并將其后綴名改為.html，以便將其轉(zhuǎn)化為可以在瀏覽器中打開的HTML文件。

使用Sublime Text編輯HTML文件

打開剛剛創(chuàng)建的HTML文件，在程序?qū)υ捒蛑羞x擇"Sublime Text"這個(gè)程序，開始對(duì)HTML文件進(jìn)行編寫。

編寫HTML基本結(jié)構(gòu)

在HTML文件中，我們首先需要添加lt;!DOCTYPE htmlgt;聲明，表示這是一個(gè)HTML5文檔。然后，添加lt;htmlgt;標(biāo)簽作為整個(gè)HTML文檔的主體部分。

設(shè)置HTML頭部

在HTML文檔中，使用lt;headgt;標(biāo)簽包含頭部?jī)?nèi)容。在頭部中，使用lt;titlegt;標(biāo)簽來設(shè)置頁(yè)面的標(biāo)題，同時(shí)使用lt;metagt;標(biāo)簽來設(shè)置文檔的編碼方式為UTF-8，以確保瀏覽器能夠正確顯示網(wǎng)頁(yè)內(nèi)容。

設(shè)置浮動(dòng)元素

在HTML的主體部分使用lt;bodygt;標(biāo)簽包含內(nèi)容。我們可以在其中使用lt;divgt;標(biāo)簽來設(shè)置浮動(dòng)元素。例如，我們?cè)O(shè)置一個(gè)紅色的div塊元素，寬度為100px，高度為200px，并且將其float屬性設(shè)置為right，這樣它就會(huì)向右浮動(dòng)。類似地，我們還可以設(shè)置一個(gè)綠色的div塊元素，寬度為100px，高度為200px，并將其float屬性設(shè)置為left，使其向左浮動(dòng)。

在瀏覽器中查看效果

保存HTML文件后，鼠標(biāo)右擊文件并選擇“在瀏覽器中打開”選項(xiàng)，即可在瀏覽器中查看最終效果。我們可以看到紅色的div塊元素向右浮動(dòng)，綠色的div塊元素向左浮動(dòng)。

源代碼參考

下面是本案例的源代碼，供大家參考：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
  lt;titlegt;網(wǎng)頁(yè)中浮動(dòng)設(shè)置一（39）lt;/titlegt;
  lt;meta charset"utf-8"gt;
lt;/headgt;
lt;bodygt;
  lt;divgt;元素的浮動(dòng)設(shè)置lt;/divgt;
  lt;div style"background-color: red; width: 100px; height: 200px; float: right;"gt;向右浮動(dòng)lt;/divgt;
  lt;div style"background-color: green; width: 100px; height: 200px; float: left;"gt;向左浮動(dòng)lt;/divgt;
lt;/bodygt;
lt;/htmlgt;