<div不接觸是指當使用CSS來布局HTML頁面時，使用<div>標簽可以將頁面內容分割為不同的區塊，互相之間不會接觸或重疊。這種布局方式使得我們可以更靈活地控制頁面的結構和樣式，同時也提高了頁面的可讀性和可維護性。
下面我們通過幾個代碼案例來詳細解釋<div不接觸>的用法。
代碼案例一：

<p>以下是一個簡單的HTML頁面布局示例，其中使用了<div>標簽將頁面內容分割為上中下三個部分：</p>
<pre>
<pre>
[css]
.container {
width: 500px;
margin: 0 auto;
}
<br>
    .header {
height: 100px;
background-color: #f2f2f2;
}
<br>
    .main {
height: 300px;
background-color: #e0e0e0;
}
<br>
    .footer {
height: 100px;
background-color: #f2f2f2;
}

以上代碼中，我們定義了一個.container類，寬度為500px，水平居中。然后分別定義了.header、.main和.footer三個類，分別表示頁面的頭部、內容部分和底部。每個區塊之間通過<div>標簽進行分割，并通過CSS樣式進行樣式定義。

代碼案例二：

<p>以下是一個更復雜的HTML頁面布局示例，其中使用了多個<div>標簽進行嵌套：</p>
<br>
    [css]
.container {
width: 800px;
margin: 0 auto;
}
<br>
    .header {
height: 100px;
background-color: #f2f2f2;
}
<br>
    .main {
background-color: #e0e0e0;
}
<br>
    .sidebar {
width: 200px;
float: left;
background-color: #c0c0c0;
}
<br>
    .content {
width: 600px;
float: right;
background-color: #d8d8d8;
}
<br>
    .footer {
height: 100px;
background-color: #f2f2f2;
}

以上代碼中，我們定義了一個.container類作為整個頁面的容器，寬度為800px，水平居中。其中.header、.main和.footer類的定義與代碼案例一相同。

在.main區塊中，我們使用了兩個<div>標簽，分別表示.sidebar和.content兩個區塊。其中.sidebar表示頁面的側邊欄，寬度為200px，浮動在左側；.content表示頁面的內容區域，寬度為600px，浮動在右側。通過這種嵌套的方式，我們可以實現復雜的頁面布局。

通過以上兩個代碼案例的介紹，我們可以看到<div不接觸>的用法可以幫助我們更好地控制頁面的結構和樣式，提高頁面的可讀性和可維護性。所以在進行HTML頁面布局時，我們可以充分利用<div>標簽來組織頁面內容，實現靈活的布局效果。