<div>和<iframe>是HTML中常用的標簽，用于創建網頁布局和嵌入其他網頁內容。在使用這兩個標簽時可以結合使用，通過<div>和<iframe>的組合可以實現復雜的網頁布局效果。本文將通過幾個代碼案例來詳細解釋和說明<div>和<iframe>框架布局的使用方法。

案例一：簡單的<div>和<iframe>嵌套

<div style="width: 500px; height: 300px;">
<iframe src="https://www.example.com" style="width: 100%; height: 100%;"></iframe>
</div>

在以上代碼中，我們創建了一個寬度為500px，高度為300px的<div>標簽，并在其中嵌套了一個<iframe>標簽。<div>標簽用于創建一個容器，并設置容器的寬度和高度。而<iframe>標簽用于嵌入其他網頁內容，通過設置樣式width: 100%; height: 100%;使<iframe>標簽的寬度和高度與容器相同，實現完美的嵌套效果。

案例二：使用<div>和<iframe>實現多欄布局

<div style="display: flex;">
<div style="flex: 1;">
<iframe src="https://www.example.com" style="width: 100%; height: 100%;"></iframe>
</div>
<div style="flex: 2;">
<iframe src="https://www.example.com" style="width: 100%; height: 100%;"></iframe>
</div>
</div>

以上代碼展示了一個使用<div>和<iframe>實現的多欄布局效果。通過設置父級<div>的樣式display: flex;使其成為彈性容器，然后通過在子<div>上設置不同的flex屬性實現子<div>的寬度比例，使其實現多欄布局。每個子<div>內部再嵌套一個<iframe>標簽，通過設置樣式width: 100%; height: 100%;使<iframe>標簽填滿子<div>的寬度和高度。

案例三：使用<div>和<iframe>實現自適應布局

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://www.example.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

以上代碼展示了一個利用<div>和<iframe>實現自適應布局的效果。通過設置<div>的樣式position: relative;創建相對定位的容器，然后設置padding-bottom: 56.25%，通過這個比例來實現寬高比為16:9的效果。然后設置<div>的高度為0，同時設置overflow: hidden;來隱藏溢出的內容。最后在<div>內部嵌套一個<iframe>標簽，并設置樣式position: absolute; top: 0; left: 0; width: 100%; height: 100%;來使<iframe>標簽填滿<div>的寬度和高度。

通過以上幾個案例，我們可以看到<div>和<iframe>的組合可以實現各種復雜的網頁布局效果。通過設置不同的樣式和屬性，我們可以靈活地控制布局的結構和外觀。使用<div>和<iframe>框架布局可以幫助我們方便地實現各種網頁布局需求，提高開發效率。