混合布局是指在一個頁面中同時使用div和css來實現布局。這種做法可以有效地分離出頁面的結構和樣式，使得網頁更加清晰易懂、易維護。

// HTML
<div class="container">
<div class="header">這里是頭部</div>
<div class="content">
<div class="left">這里是左側內容</div>
<div class="right">這里是右側內容</div>
</div>
<div class="footer">這里是底部</div>
</div>
//CSS
.container {
width: 960px;
margin: 0 auto;
}
.header {
height: 80px;
background: #eee;
}
.content {
display: flex;
}
.left {
width: 200px;
background: #ddd;
}
.right {
flex-grow: 1;
background: #ccc;
}
.footer {
height: 60px;
background: #bbb;
}

在上面的代碼中，我們使用了一個容器元素作為整個頁面的框架。該容器設置了固定的寬度，并且通過設置margin來使其水平居中。接下來我們使用了div元素分別實現了頁面的頭部、內容區域和底部。

在樣式部分，我們使用了CSS的flex布局來實現左右兩個區域的自適應。具體來說，我們為容器元素設置了display:flex屬性，并且將左側元素設置了一個固定的寬度，右側元素則使用了flex-grow屬性來實現自適應寬度。

總體來說，混合布局的方式可以讓我們更加高效地實現復雜的頁面布局。除了使用div和css之外，我們還可以借助HTML5的語義化標簽、響應式設計等技術來進一步優化頁面效果。