前言
本文将介绍五种常见页面布局方式及其优缺点。
Flexbox - 弹性布局
Grid - 网格布局
Floats - 浮动布局
Positioning - 定位布局
Table layout - 表格布局
以如下布局为例：
三栏布局，左右固定宽度，中间自适应
left
center
right
Flexbox弹性布局(推荐)优点：css3新特性，简单快捷，目前主流布局方式，解决旧特性定位时产生元素脱离文档流问题。
缺点：仅支持 IE9 以上浏览器，详细兼容情况戳这里。
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
11
12.flex-wrap {
display: flex;
/* height: 100px; */
/* 不设置高度则自适应 */
}
.flex-wrap .left,
.flex-wrap .right {
width: 200px;
}
.flex-wrap .center {
flex: 1;
}
Grid网格布局(未来趋势)优点：可将网页划分成不同的网格，任意组合不同布局，可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。
缺点：css 实验性新特性，在浏览器中还没有得到广泛的支持。
Grid 布局的属性分成两类：
容器属性；
项目属性。
这里只简单介绍容器属性的简单应用：横向三列布局。
1
2
3
4
5
1
2
3
4
5.grid-wrap {
display: grid;
grid-template-rows: 100px; /* 设置行高，不设置则自适应 */
grid-template-columns: 200px auto 200px; /* 设置列宽，也可使用百分比 */
}
关于 Grid网格布局的详细应用可参考阮一峰老师的博客，十分详细易懂，阮一峰的网络日志：CSS Grid 网格布局教程。
Floats浮动布局优点：比较简单，兼容性好；
缺点：浮动会使元素脱离文档流，容易出现高度塌陷等问题，需做好清理浮动。
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
11.float-wrap>div {
height: 200px;
}
.float-wrap .left {
float: left;
width: 200px;
}
.float-wrap .right {
float: right;
width: 200px;
}
以上方式虽简单，但仅适合所有元素等高的情况，因为元素浮动会脱离文档流，所以不等高可能会出现如下几种状况；
未浮动元素高于浮动元素，造成围绕效果。
left
right
center
center
center
解决方案：未浮动元素创建 BFC，以下是创建BFC的五种方式。
float 除了none以外的值
overflow 除了visible 以外的值(hidden，auto，scroll )
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为(absolute，fixed)
fieldset元素
1
2
3
4.float-wrap .center {
overflow: auto;
/* 或者设置其他的非默认的 overflow: visible 的值。 */
}
效果如下：
left
right
center
center
center
传统未清除浮动问题，浮动元素高于父容器，导致高度塌陷。
left
left
left
right
center
外部元素
解决方案：父容器清除浮动，更多清除浮动方法文章末尾有总结，清除浮动的四种方法。
1
2
3
4.float-wrap {
overflow: auto;
/* 或者设置其他的非默认的 overflow: visible 的值。 */
}
效果如下：
left
left
left
right
center
外部元素
Positioning定位布局优点：简单直接；
缺点：绝对定位同float布局一样会脱离文档流，高度塌陷问题。
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.position-wrap>div {
position: absolute;
}
.position-wrap .left {
width: 200px;
left: 0;
}
.position-wrap .right {
width: 200px;
right: 0;
}
.position-wrap .center {
left: 200px;
right: 200px;
}
出现高度塌陷问题，可创建BFC来解决，直接给父容器添加 overflow: auto; 或 hidden、scroll等。
1
2
3
4.position-wrap {
overflow: auto;
/* 或 hidden、scroll 等 */
}
table布局优点：兼容性最佳
缺点：对 seo 不友好，且列高不能自适应，所有列高会保持一致。(且很少有人使用table布局了)
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
11.table-wrap {
display: table;
width: 100%;
}
.table-wrap>div {
display: table-cell;
}
.table-wrap .left,
.table-wrap .right {
width: 200px;
}
清除浮动的四种方法推荐使用前两种，生产环境推荐第二种。
父容器添加 overflow
1
2
3
4.container {
overflow: hidden;
/* 或 auto、scroll 等非默认 visible 值*/
}
通过伪元素清除浮动通用样式添加 .clearfix 及其伪类样式；
给需要清除浮动的元素class添加 clearfix 类；
1
2
3
4
5
6
7
8
9
10
11
12
13
14/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:block;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
父容器内添加空元素父容器底部添加空元素;
添加样式 clear: both;。
缺点：增加冗余标签，违背了语义网的原则。
1
2
3
4
5
...
浮动父容器
缺点：影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
