两侧或多侧等高布局，在网页设计中是十分常见的，最近在重看 CSS 世界时，觉得有必要对 CSS2 中几种实现方式进行实践和总结，一起来看看吧。

等高布局

这里总共介绍三种实现方式

padding + margin
border
table-cell

使用 padding + margin 有个棘手的限制，就是父级的 overflow: hidden。其次当触发锚点定位或者使用 DOM.scrollIntoView 方法的时候，可能会出现奇怪的定位问题。

border 的优势在于兼容性好，没有锚点定位的隐患，不足支持在于最多 3 栏，同时由于 border 不支持百分比宽度，因此只能实现至少一侧定宽的布局。

table-cell 的优点是天然等高，不足在于 IE8 及以上版本浏览器才支持。

下面看看具体实现吧

padding + margin

原理：给 margin-bottom 设置一个负特别大的值，比如 -9999px，此时意味着后面的所有元素和上面的元素的空间距离变成了 -9999px，然后神来之笔，通过 padding-bottom 增加元素增加元素高度，正负抵消，对布局并无影响，但却带来了我们需要的东西，视觉上多了 9999px 高度可使用的背景色，配合父级的 hidden 把多出来的色块隐藏掉即可。

.column-box {
    overflow: hidden;
}
.column-left, .column-right {
    float: left;
    width: 50%;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}
.column-left {
    background-color: green;
}
.column-right {
    background-color: yellow;
}

border

border 的使用就比较简单了，因为容器的 border 天然和内容区域等高的。直接看代码

.box {
    border-left: 150px solid #333;
    background-color: #f0f3f9;
}
.box > nav {
    float: left;
    width: 150px;
    margin-left: -150px;
}
.box > section {
    overflow: hidden;
}

table-cell

table 布局就更简单了，大家都知道，对于表格的横向单元格天然就是等高的

.column-box {
    display: table;
    width: 100%;
}
.column-left, .column-right {
    width: 50%;
    display: table-cell;
}
.column-left {
    background-color: green;
}
.column-right {
    background-color: yellow;
}

多栏自适应布局

实现方式

float 配合 margin 或 BFC

float

具体 CSS 如下

.left {
    width: 200px;
    float: left;
}
.right {
    margin-left: 200px;
}

或者 margin-left 也可以换成 overflow: hidden 来创建一个 BFC，此时表现更加智能，有如下优点

自适应内容由于封闭而更健壮，容错性更强，比如内部设置 clear: both 不会和 float 元素互相干烧
自适应内容自动填满浮动以外区域，无须关心浮动元素宽度，可以整站大规模通用，比如抽象几个通用的布局类名
```
.left {
  float: left;
}
.right {
  float: right;
}
.bfc {
  overflow: hidden;
}
```

Better

等高布局、多栏自适应布局