<div>層級元素是指在 HTML 文檔中用于組織、布局和分層的元素。通過使用不同的 div 元素，并將它們嵌套在一起，可以實現復雜的頁面布局和設計。每個 div 元素可以包含其他 HTML 元素，如文本、圖像、表單等。通過設置不同的樣式和屬性，可以對每個層級元素進行定位、對齊、大小和背景等操作，從而實現靈活且美觀的頁面設計。
在下面的幾個代碼案例中，我們將詳細解釋如何使用 div 層級元素來創建不同的布局和設計。
案例 1：兩列布局 要創建一個簡單的兩列布局，我們可以使用兩個 div 元素，并將它們設置為 float: left 或 float: right。在第一個 div 元素中，我們放置內容，如文本、圖像或其他 HTML 元素；在第二個 div 元素中，我們放置另一組內容。這種方法可以讓我們在同一行上放置兩個并列的元素。

<div style="float: left; width: 50%;">
<p>左側內容</p>
</div>
<div style="float: right; width: 50%;">
<p>右側內容</p>
</div>

案例 2：三列布局 如果我們想要創建一個三列布局，可以使用三個 div 元素，并為它們設置不同的寬度。下面是一個示例，其中第一個 div 元素占據頁面寬度的 20%，第二個 div 元素占據 50%，第三個 div 元素占據 30%。

<div style="width: 20%; float: left;">
<p>左側內容</p>
</div>
<div style="width: 50%; float: left;">
<p>中間內容</p>
</div>
<div style="width: 30%; float: left;">
<p>右側內容</p>
</div>

案例 3：嵌套層級 除了在同一級別上使用 div 元素，我們還可以將一個 div 元素嵌套在另一個 div 元素內部。這樣可以創建更復雜的布局和設計。例如，我們可以創建一個包含標題、導航欄和內容的網頁布局。

<div>
<h1>頁面標題</h1>
<div>
<ul>
<li>導航項 1</li>
<li>導航項 2</li>
<li>導航項 3</li>
</ul>
</div>
<div>
<p>頁面內容</p>
</div>
</div>

通過使用 div 層級元素，我們可以輕松地組織和管理頁面的不同部分。我們可以給每個層級元素設置不同的樣式和屬性，以實現所需的頁面布局和設計效果。無論是簡單的兩列布局還是復雜的多層級嵌套，使用 div 元素可以幫助我們實現更好的用戶體驗和頁面可讀性。