CSS 实现布局的几种方法

假设高度已知，请写出三栏布局，其中左栏、右栏各为 300px，中间自适应。

基础框架

<article class="box">
  <div class="left"></div>
  <div class="middle">
    <h3>grid 方案</h3> 
    <p>1. 这是三栏布局中间部分</p>
    <p>2. 这是三栏布局中间部分</p>
  </div>
  <div class="right"></div>
</article>

公共样式

html * {
  padding: 0;
  margin: 0;
}
article {
  margin-bottom: 20px;
}
article div {
  min-height: 100px;
}
.left {
  background: yellow;
  width: 300px;
}
.middle {
  background: red;
}
.right {
  background: blue;
  width: 300px;
}

几种解法

1.1 浮动方案

.float .left {
  float: left;
}
.float .right {
  float: right;
}

注：当内容过多时，超出的内容会出现在左边栏下边，创建 BFC 可以解决这个问题。

1.2 绝对定位

.absolute > div {
  position: absolute;
}
.absolute .left {
  left: 0;
}
.absolute .middle {
  left: 300px;
  right: 300px;
}
.absolute .right {
  right: 0;
}

1.3 Flexbox

.flexbox  {
  display: flex;
  margin-top: 140px;
}
.flexbox .middle {
  flex: 1;
}

1.4 表格

.table {
  display: table;
  width: 100%;
}
.table > div{
  display: table-cell;
}

1.5 grid

.grid  {
	display: grid;
	width: 100%;
	grid-template-rows: 100px;
	grid-template-columns: 300px auto 300px;
}

解法的优缺点及比较

浮动方案

优点：兼容性好
缺点：脱离文档流，需要清除浮动，处理周边元素关系。可使用性比较差

绝对定位方案

优点：快捷
缺点：脱离文档流

flexbox 方案

优点：解决了以上两种方案的问题
缺点：不兼容低版本浏览器

表格方案

优点：兼容性好
缺点：三栏同时增高

grid 方案

优点：方便易用
缺点：兼容性

如果高度未知或内容超出，浮动方案、绝对定位方案和 grid 方案将不再适用。