<div>和<span>是HTML中的兩個重要的標簽，常用于頁面布局和樣式定義。其中，<div>標簽表示一個文檔中的區塊或容器，可以用來劃分頁面的不同部分，并進行樣式的定義和設置；<span>標簽用于對頁面中的文本進行行內樣式的定義和設置。在網頁設計中，常常會遇到需要使用浮動來布局的情況，下面將通過幾個代碼案例來詳細解釋和說明<div>、<span>和浮動的使用。
第一個案例是使用<div>標簽進行頁面布局的示例。在以下代碼中，我們使用了四個<div>標簽來劃分頁面的四個部分，并為每個<div>標簽設置了不同的顏色和寬度。

<p><div style="background-color: red; width: 100px;">這是第一個區塊</div></p>
<p><div style="background-color: blue; width: 200px;">這是第二個區塊</div></p>
<p><div style="background-color: green; width: 300px;">這是第三個區塊</div></p>
<p><div style="background-color: yellow; width: 400px;">這是第四個區塊</div></p>

在上述代碼中，每個<div>標簽都具有不同的背景顏色和寬度，通過這種方式可以更加清晰地劃分和布局頁面的不同區域。
接下來，我們將使用<span>標簽來對頁面中的文本進行行內樣式的定義和設置。在以下的代碼中，我們使用了<span>標簽來設置頁面中的一段文字的顏色和字號。

<p>這是一段<span style="color: red; font-size: 20px;">紅色</span>的文字</p>

在上述代碼中，通過在<span>標簽中設置了顏色和字號的樣式，使得頁面中的"紅色"這段文字呈現為紅色并且字號為20px。
最后，我們來使用浮動來布局頁面元素。在以下的代碼中，我們使用了<div>和<span>標簽來創建一個導航條，并使用浮動來實現橫向的排列。

<p><div style="background-color: gray;">
<span style="float: left;">首頁</span>
<span style="float: left;">關于我們</span>
<span style="float: left;">產品介紹</span>
<span style="float: left;">聯系我們</span>
</div>

在上述代碼中，我們通過設置<span>標簽的浮動屬性為"left"，使得導航條中的每個鏈接都橫向排列，并呈現為一行。
來說，<div>和<span>標簽在HTML中扮演著重要的角色，用于頁面布局和樣式的定義。通過合理地使用這兩個標簽以及浮動屬性，可以實現豐富多樣的頁面效果和布局。希望本文對于大家理解和使用<div>、<span>和浮動有所幫助。