CSS兩翼布局是一種很常用的頁面布局方式，它可以讓我們快速地將頁面分為頭部、側邊欄、主體內容和底部等不同的區域。這種布局方式需要用到一些 CSS 屬性和技巧，下面我們來詳細了解一下。

首先，我們需要將頁面分為不同的區塊。這可以通過 HTML 代碼來實現，我們可以使用一個 div 元素作為整個頁面的容器，然后在其中嵌套不同的 div 元素作為不同的區塊，例如：

<div id="container">
<div id="header">頭部</div>
<div id="sidebar">側邊欄</div>
<div id="content">主體內容</div>
<div id="footer">底部</div>
</div>

有了這些區塊之后，我們可以使用 CSS 來設置它們的樣式。例如，我們可以使用 float 屬性來讓左邊的區塊浮動到左邊，右邊的區塊浮動到右邊，中間的區塊自動填滿剩余的空間：

#header {
height: 100px;
background-color: #eee;
}
#sidebar {
float: left;
width: 200px;
height: 500px;
background-color: #ccc;
}
#content {
margin-left: 200px;
margin-right: 200px;
height: 500px;
background-color: #fff;
}
#footer {
clear: both;
height: 100px;
background-color: #eee;
}

在上面的代碼中，我們將 header 區塊的高度設置為 100px，background-color 設置為 #eee；將 sidebar 區塊設置為浮動到左邊，寬度為 200px，高度為 500px，background-color 設置為 #ccc；將 content 區塊設置左右留出 200px 的空白，高度為 500px，background-color 設置為 #fff；將 footer 區塊設置為清除浮動，高度為 100px，background-color 設置為 #eee。

通過這樣的設置，我們可以輕松地實現一個簡單的兩翼布局網頁。當然，如果需要更加復雜的布局，我們還可以使用一些其他的 CSS 技巧，例如 position 屬性、display 屬性等等。