1.使用浮動
以下是使用浮動（float）實現的圣杯布局的一個簡單例子：
HTML:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”>
<div class="main">
<div class="content">
<p>這是主體內容部分，寬度自適應。</p>
</div>
</div>
<div class="left">
<p>這是左側欄，固定寬度。</p>
</div>
<div class="right">
<p>這是右側欄，固定寬度。</p>
</div>
</div>
</body>
</html>
CSS (styles.css):
.container {
pding: 0 200px; /* 為左右兩側欄留出空間 */
overflow: hidden; /* 防止內容溢出 */
}
.main {
float: left;
width: 100%;
background: #f5f5f5; /* 可選：區(qū)分主體內容區(qū)域 */
}
.content {
margin: 0 220px; /* 減去左右兩側欄的寬度和額外的padding */
}
.left, .right {
position: relative;
float: left;
width: 200px; /* 固定寬度 */
height: 100%;
margin-left: -100%; /* 將左側欄拉到主體內容的左邊 */
background: #eee; /* 可選：區(qū)分側欄區(qū)域 */
}
.right {
margin-left: -200px; /* 將右側欄拉到主體內容的右邊 */
}
/* 清除浮動 */
.container::after {
content: "";
display: table;
clear: both;
}
在這個例子中，.container 為兩側欄預留了空間，并通過 padding 實現。.main 占據了 .container 的全部寬度，并通過 margin 在內容區(qū)域為兩側欄留出空間。.left 和 .right 使用了負 margin-left 來將它們移動到 .main 的兩側。最后，.container::after 用于清除浮動，確保 .container 可以正確包含浮動元素。
請注意，這種方法在某些情況下可能需要對 margin 進行微調，以確保內容正確顯示。同時，由于浮動元素的特性，如果 .left 和 .right 的高度超過 .main，它們可能會覆蓋 .main 的內容。在實際使用中，可能需要根據具體需求和瀏覽器兼容性進行調整。
2.使用定位。
使用定位（position）來實現圣杯布局是一個經典的方法。以下是一個基于定位實現的圣杯布局的例子：
HTML代碼：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - 定位版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”>
<div class="left">
<p>這是左側欄，固定寬度。</p>
</div>
<div class="main">
<p>這是主體內容部分，寬度自適應。</p>
</div>
<div class="right">
<p>這是右側欄，固定寬度。</p>
</div>
</div>
</body>
</html>
CSS代碼（styles.css）：
body, html {
margin: 0;
pding: 0;
height: 100%;
}
.container {
position: relative; /* 設置為相對定位 */
padding: 0 220px; /* 為左右兩側欄留出空間，注意這里要加上側欄的padding */
min-height: 100vh; /* 設置最小高度為視口高度，避免布局高度問題 */
}
.main {
width: 100%; /* 寬度為100% */
float: left; /* 使用浮動使內容左對齊 */
box-sizing: border-box; /* 包括padding和border在寬度內 */
}
.left, .right {
position: absolute; /* 設置為絕對定位 */
top: 0; /* 頂部對齊 */
width: 200px; /* 固定寬度 */
height: 100%; /* 高度與容器相同 */
box-sizing: border-box; /* 包括padding和border在寬度內 */
}
.left {
left: 0; /* 定位到容器的左側 */
padding-right: 20px; /* 右側留出空間，防止內容緊貼邊緣 */
}
.right {
right: 0; /* 定位到容器的右側 */
padding-left: 20px; /* 左側留出空間，防止內容緊貼邊緣 */
}
/* 清除浮動 */
.container::after {
content: "";
display: table;
clear: both;
}
在這個例子中，.container 設置了 position: relative;，這樣它的子元素可以使用絕對定位相對于它進行定位。.left 和 .right 使用了 position: absolute;，并且分別通過 left: 0; 和 right: 0; 定位到 .container 的左右兩側。
.container 的 padding 屬性為左右兩側欄留出了空間，確保它們不會覆蓋 .main 的內容。同時，.left 和 .right 的 padding 屬性則用來防止內容緊貼著容器的邊緣。
注意，絕對定位的元素不會參與正常的文檔流，所以它們的寬度和高度不會影響到 .container 的大小。因此，你可能需要為 .container 設置一個最小高度（如 min-height: 100vh;），以確保它至少占據整個視口的高度。
最后，.container::after 偽元素用于清除浮動，這是為了確保 .container 的高度能夠正確包含 .main 的內容，盡管 .left 和 .right 是絕對定位的。但是在這個具體的布局實現中，清除浮動其實是不必要的，因為 .main 已經通過 float: left; 浮動到左側，并且 .left 和 .right 是絕對定位的，不會影響到 .main 的布局。
在實際項目中，還需要考慮兼容性問題，比如一些老版本的瀏覽器可能不支持某些CSS屬性。因此，在編寫代碼時，最好進行充分的測試，以確保布局在所有目標瀏覽器中都能正確顯示。
3.使用Flexbox。
使用Flexbox（彈性盒模型）來實現圣杯布局是一種更加現代和靈活的方法。Flexbox 允許你輕松地創(chuàng)建復雜的布局，而無需使用浮動或定位。以下是使用Flexbox實現圣杯布局的一個例子：
HTML 代碼：
html
<!DOCTYPE html>
<html lang=“en”>
<he>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - Flexbox版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”>
<div class="left">
<p>這是左側欄，固定寬度。</p>
</div>
<div class="main">
<p>這是主體內容部分，寬度自適應。</p>
</div>
<div class="right">
<p>這是右側欄，固定寬度。</p>
</div>
</div>
</body>
</html>
CSS 代碼（styles.css）：
css
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex; /* 啟用彈性盒模型 */
justify-content: space-between; /* 子項兩端對齊 */
align-items: stretch; /* 子項在交叉軸上拉伸至相同高度 */
padding: 0 20px; /* 為左右兩側欄留出空間 */
}
.main {
flex: 1; /* 占據剩余空間 */
background: #f5f5f5; /* 可選：區(qū)分主體內容區(qū)域 */
}
.left, .right {
flex: 0 0 200px; /* 固定寬度為200px，不伸縮 */
background: #eee; /* 可選：區(qū)分側欄區(qū)域 */
}
/* 根據需要調整側欄的 margin */
.left {
margin-right: 20px; /* 右側留出空間，防止與主內容緊貼 */
}
.right {
margin-left: 20px; /* 左側留出空間，防止與主內容緊貼 */
}
在這個例子中，.container 被設置為 display: flex;，這意味著它的直接子元素（.left、.main 和 .right）會成為彈性項目，并且會按照Flexbox的規(guī)則進行布局。
.main 的 flex 屬性被設置為 1，這意味著它會占據所有可用的剩余空間。由于 .left 和 .right 的 flex 屬性被設置為 0 0 200px，它們將保持固定的寬度（在這個例子中是 200px），不會伸縮。
justify-content: space-between; 確保 .left、.main 和 .right 均勻分布在 .container 中，.left 貼近左側，.right 貼近右側，而 .main 占據中間的空間。
align-items: stretch; 確保所有彈性項目在交叉軸（默認是垂直方向）上伸展以填充 .container 的高度。如果需要，可以調整 align-items 的值以改變這一行為。
.container 的 pding 屬性為左右兩側欄留出了空間，防止它們與 .main 的內容重疊。同時，.left 和 .right 的 margin 屬性則用來在它們與 .main 之間添加額外的間距。
使用Flexbox實現圣杯布局的好處是代碼簡潔、易于理解，并且提供了更好的瀏覽器兼容性（盡管在一些較老的瀏覽器中可能需要添加瀏覽器前綴或使用polyfill）。此外，Flexbox 還提供了更多的布局選項和靈活性，可以輕松地應對不同的布局需求。
4.使用網格布局（Grid）。
使用CSS Grid布局實現圣杯布局是一種非常直觀和強大的方法。Grid布局允許你創(chuàng)建復雜的二維布局結構，而無需使用浮動、定位或Flexbox。以下是使用Grid布局實現圣杯布局的一個例子：
HTML代碼：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>圣杯布局 - Grid版</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“container”>
<div class="left">
<p>這是左側欄，固定寬度。</p>
</div>
<div class="main">
<p>這是主體內容部分，寬度自適應。</p>
</div>
<div class="right">
<p>這是右側欄，固定寬度。</p>
</div>
</div>
</body>
</html>
CSS代碼（styles.css）：
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: grid; /* 啟用網格布局 */
grid-template-columns: 200px 1fr 200px; /* 定義列寬度：左側欄寬度、主內容自適應、右側欄寬度 */
grid-template-rows: 100%; /* 定義行高度，這里為滿高 */
grid-column-gap: 20px; /* 列之間的間隙 */
}
.left {
grid-column: 1; /* 放置在第一列 */
background: #eee; /* 可選：區(qū)分側欄區(qū)域 */
}
.main {
grid-column: 2; /* 放置在第二列 */
background: #f5f5f5; /* 可選：區(qū)分主體內容區(qū)域 */
}
.right {
grid-column: 3; /* 放置在第三列 */
background: #eee; /* 可選：區(qū)分側欄區(qū)域 */
}
在這個例子中，.container 使用了 display: grid; 來啟用網格布局。grid-template-columns 屬性定義了網格的列結構，其中 200px 是左側欄和右側欄的固定寬度，1fr 是一個彈性單位，表示主內容區(qū)域將占據可用的剩余空間。grid-template-rows 定義了網格的行結構，這里簡單地設置為 100% 來表示單行并占據整個容器的高度。grid-column-gap 設置了列之間的間隙。
.left、.main 和 .right 分別通過 grid-column 屬性指定它們應該放置在網格的哪一列。這樣，左側欄被放置在第一列，主內容區(qū)域被放置在第二列，右側欄被放置在第三列。
網格布局的優(yōu)勢在于它可以輕松處理復雜的二維布局，而且代碼相對簡潔易讀。此外，網格布局也提供了很好的瀏覽器兼容性，盡管在一些較老的瀏覽器中可能需要使用瀏覽器前綴或使用polyfill。