为什么会有这篇

有些面试题会有这些，实际上并没有什么作用，可以用 flex 布局轻松实现。
在老旧浏览器中不支持 flex ，为了实现常见的三栏布局，即分左中右三部分，左右两部分宽度固定，中间部分宽度随浏览器变化。

这些布局有以下特点：

  1. 两侧宽度固定，中间宽度自适应
  2. 中间部分在DOM结构上优先，以便先行渲染
  3. 允许三列中的任意一列成为最高列
  4. 只需要使用一个额外的
    标签

流体布局

1
2
3
4
5
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
.right {
    float: right;
    width: 200px;
    height: 200px;
    background: blue;
}
.main {
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background: green;
}

圣杯布局

来源于 In Search of the Holy Grail 

1
2
3
4
5
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.container {
    height: 200px;
    margin-left: 120px;
    margin-right: 220px;
}
.main {
    float: left;
    width: 100%;
    height: 200px;
    background: green;
}
.left {
    position: relative;
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -120px;
    background: red;
}
.right {
    position: relative;
    right: -220px;
    float: right;
    height: 200px;
    width: 200px;
    margin-left: -200px;
    background: blue;
}

双飞翼布局


1
2
3
4
5
<div class="container">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.container {
    float: left;
    width: 100%;
}
.main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background: green;
}
.main::after {
    content: '';
    display: block;
    font-size:0;
    height: 0;
    zoom: 1;
    clear: both;
}
.left {
    float:left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background: red;
}
.right {
    float: right;
    height: 200px;
    width: 200px;
    margin-left: -200px;
    background: blue;
}