CSS 页面布局常用的五种方式及其优缺点 - 前端随笔

前言

本文将介绍五种常见页面布局方式及其优缺点。

Flexbox - 弹性布局
Grid - 网格布局
Floats - 浮动布局
Positioning - 定位布局
Table layout - 表格布局

以如下布局为例：

三栏布局，左右固定宽度，中间自适应

left

center

right

Flexbox 弹性布局（推荐）

优点：css3 新特性，简单快捷，目前主流布局方式，解决旧特性定位时产生元素脱离文档流问题。
缺点：仅支持 IE9 以上浏览器，详细兼容情况戳这里。

<section class="flex-wrap">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</section>

.flex-wrap {
  display: flex;
  /* height: 100px; */
  /* 不设置高度则自适应 */
}
.flex-wrap .left,
.flex-wrap .right {
  width: 200px;
}
.flex-wrap .center {
  flex: 1;
}

Grid 网格布局（未来趋势）

优点：可将网页划分成不同的网格，任意组合不同布局，可以实现以前只能通过诸如Bootstrapcss 第三方框架的布局效果。
缺点：css 实验性新特性，在浏览器中还没有得到广泛的支持。

Grid 布局的属性分成两类：

容器属性；
项目属性。

这里只简单介绍容器属性的简单应用：横向三列布局。

<section class="grid-wrap">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</section>

.grid-wrap {
  display: grid;
  grid-template-rows: 100px; /* 设置行高，不设置则自适应 */
  grid-template-columns: 200px auto 200px; /* 设置列宽，也可使用百分比 */
}

关于 Grid 网格布局的详细应用可参考阮一峰老师的博客，十分详细易懂，阮一峰的网络日志：CSS Grid 网格布局教程。

Floats 浮动布局

优点：比较简单，兼容性好；
缺点：浮动会使元素脱离文档流，容易出现高度塌陷等问题，需做好清理浮动。

<section class="float-wrap">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">center</div>
  <!-- ⚠️注意，没浮动的div应放再最后，left左浮动完后，行剩余空间会被center占满 -->
</section>

.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布局一样会脱离文档流，高度塌陷问题。

<section class="position-wrap">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</section>

.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等。

.position-wrap {
  overflow: auto;
  /* 或 hidden、scroll 等 */
}

table 布局

优点：兼容性最佳
缺点：对 seo 不友好，且列高不能自适应，所有列高会保持一致。（且很少有人使用 table 布局了）

<section class="table-wrap">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</section>

.table-wrap {
  display: table;
  width: 100%;
}
.table-wrap > div {
  display: table-cell;
}
.table-wrap .left,
.table-wrap .right {
  width: 200px;
}

清除浮动的四种方法

推荐使用前两种，生产环境推荐第二种。

父容器添加 overflow

.container {
  overflow: hidden;
  /* 或 auto、scroll 等非默认 visible 值*/
}

通过伪元素清除浮动
- 通用样式添加 .clearfix 及其伪类样式；
- 给需要清除浮动的元素class添加 clearfix 类；

/* 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;。

缺点：增加冗余标签，违背了语义网的原则。

<section>
  <div style="float: left">
    ....
    <div>
      ...
      <div style="clear: both;"></div>
      <section></section>
    </div>
  </div>
</section>

浮动父容器

缺点：影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

参考文献：

MDN - Introduction to CSS layout

阮一峰的网络日志 - CSS Grid 网格布局教程