兩者功能效果相同，實現方式不同
效果預覽
- 兩側寬度固定，中間寬度自適應（三欄布局）
- 中間部分優先渲染
- 允許三列中的任意一列成為最高列
圣杯布局
通過左右欄填充容器的左右 padding 實現，更多細節詳見注釋。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css 圣杯布局</title><style>body {/* 清除瀏覽器默認樣式 */margin: 0;/* 設置最小寬度 */min-width: 550px;}.header {background-color: gray;height: 40px;}.container {/* 圣杯布局 -- 通過 padding 實現 */padding-left: 200px;padding-right: 150px;}.center {/* center寬度自適應 */width: 100%;float: left;background-color: yellow;height: 100px;}.left {width: 200px;float: left;margin-left: -100%;position: relative;right: 200px;background-color: blue;height: 100px;}.right {width: 150px;float: left;margin-right: -150px;background-color: red;height: 100px;}.footer {/* 清除浮動 */clear: both;background-color: gray;height: 40px;}</style></head><body><div class="header">header</div><div class="container"><!-- center 置于 left 和 right 的上方，用于優先渲染頁面主體內容 --><div class="center">center</div><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div></body>
</html>
雙飛翼布局
通過左右欄填充主體內容的左右 margin 實現，更多細節詳見注釋。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css 雙飛翼布局</title><style>body {/* 清除瀏覽器默認樣式 */margin: 0;/* 設置最小寬度 */min-width: 550px;}.header {background-color: gray;height: 40px;}.container {/* 自適應寬度 */width: 100%;/* 左浮動 */float: left;}.center {/* 雙飛翼布局 -- 通過 margin 留白實現 */margin-left: 200px;margin-right: 150px;background-color: yellow;height: 100px;}.left {width: 200px;/* 左浮動 */float: left;/* 自身向左移動父元素（此處為body）寬度的 100% */margin-left: -100%;background-color: blue;height: 100px;}.right {width: 150px;/* 左浮動 */float: left;/* 自身向左移動 150px */margin-left: -150px;background-color: red;height: 100px;}.footer {/* 清除浮動 */clear: both;background-color: gray;height: 40px;}</style></head><body><div class="header">header</div><div class="container"><!-- center 置于 left 和 right 的上方，用于優先渲染頁面主體內容 --><div class="center">center</div></div><!-- left 置于 container 外面 --><div class="left">left</div><!-- right 置于 container 外面 --><div class="right">right</div><div class="footer">footer</div></body>
</html>
手寫清除浮動 clearfix
/* 手寫 clearfix */
.clearfix:after {content: "";display: table;clear: both;
}
.clearfix {*zoom: 1; /* 兼容 IE 低版本 */
}
用在類似圣杯布局的容器上，footer 不再需要 clear: both;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css 圣杯布局</title><style>body {/* 清除瀏覽器默認樣式 */margin: 0;/* 設置最小寬度 */min-width: 550px;}.header {background-color: gray;height: 40px;}.container {/* 圣杯布局 -- 通過 padding 實現 */padding-left: 200px;padding-right: 150px;}.center {/* center寬度自適應 */width: 100%;float: left;background-color: yellow;height: 100px;}.left {width: 200px;float: left;margin-left: -100%;position: relative;right: 200px;background-color: blue;height: 100px;}.right {width: 150px;float: left;margin-right: -150px;background-color: red;height: 100px;}.footer {/* 清除浮動 *//* clear: both; */background-color: gray;height: 40px;}/* 手寫 clearfix */.clearfix:after {content: "";display: table;clear: both;}.clearfix {*zoom: 1; /* 兼容 IE 低版本 */}</style></head><body><div class="header">header</div><div class="container clearfix"><!-- center 置于 left 和 right 的上方，用于優先渲染頁面主體內容 --><div class="center">center</div><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div></body>
</html>
——點對點傳輸場景方案)
