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

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

新建HTML文件

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

使用Sublime Text編輯HTML文件

打開剛剛創(chuàng)建的HTML文件，在程序對話框中選擇"Sublime Text"這個程序，開始對HTML文件進行編寫。

編寫HTML基本結構

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

設置HTML頭部

在HTML文檔中，使用lt;headgt;標簽包含頭部內容。在頭部中，使用lt;titlegt;標簽來設置頁面的標題，同時使用lt;metagt;標簽來設置文檔的編碼方式為UTF-8，以確保瀏覽器能夠正確顯示網頁內容。

設置浮動元素

在HTML的主體部分使用lt;bodygt;標簽包含內容。我們可以在其中使用lt;divgt;標簽來設置浮動元素。例如，我們設置一個紅色的div塊元素，寬度為100px，高度為200px，并且將其float屬性設置為right，這樣它就會向右浮動。類似地，我們還可以設置一個綠色的div塊元素，寬度為100px，高度為200px，并將其float屬性設置為left，使其向左浮動。

在瀏覽器中查看效果

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

源代碼參考

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

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