css【详解】—— 圣杯布局 vs 双飞翼布局（含手写清除浮动 clearfix）

两者功能效果相同，实现方式不同

效果预览

在这里插入图片描述

两侧宽度固定，中间宽度自适应（三栏布局）
中间部分优先渲染
允许三列中的任意一列成为最高列

圣杯布局

通过左右栏填充容器的左右 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>