# 三栏布局
圣杯布局和双飞翼布局是经典的三栏式布局，两者的布局效果基本相同，都是两边两栏宽度固定，中间宽度自适应。
在 HTML 结构上中间栏在最前面保证了最先渲染中间提升性能，并且兼容性良好。
# 圣杯布局
使用 padding 属性，中间栏为两边腾出位置。
圣杯布局会有一个问题：它存在一个最小宽度，当页面小于这个最小宽度时，布局就会乱掉。
解决方法是给 body 设置一个
min-width，min-width 的值为左侧宽度 * 2 + 右侧宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
body {
min-width: 600px;
}
.bd {
padding: 0 200px 0 200px;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="bd">
<div class="main">
main
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
# 双飞翼布局
- 使用 margin 属性，中间栏不变，将内容部分为两边腾出位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.main-content {
margin: 0 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
}
</style>
</head>
<body>
<div class="bd">
<div class="main">
<div class="main-content">main</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
# BFC
# 如何创建 BFC
float 为 left | right
overflow 为 hidden | auto | scroll
display 为 inline-block | flex | table-cell | table-caption | inline-flex
position 为 absolute | fixed
根元素
# BFC 布局规则
内部的 box 会在垂直方向上，一个接一个的放置（即块级元素独占一行）。
BFC 的区域不会与 float box 重叠，利用这点可以实现自适应两栏布局。
内部 box 垂直方向上的距离由 margin 决定。属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠。
计算 BFC 高度时，浮动元素也参与计算。
BFC 就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
# BFC 的特性
BFC 会阻止垂直外边距折叠。
BFC 不会重叠浮动元素。
BFC 可以包含浮动——清除浮动。
# Flexbox 布局
# Grid 布局
CSS 工作流 →