两者功能效果相同，实现方式不同
效果预览
- 两侧宽度固定，中间宽度自适应（三栏布局）
- 中间部分优先渲染
- 允许三列中的任意一列成为最高列
圣杯布局
通过左右栏填充容器的左右 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>
