CSS Float 布局：圣杯布局

发表于 分类于 阅读次数：

这篇文章讲述使用 CSS Float 实现圣杯布局。

Float 浮动

float 是 CSS 中一种比较麻烦的属性，涉及到 BFC 和清除浮动。

float 特点

  • 元素浮动；
  • 脱离文档流，但不脱离文本流；

float 的影响

对自身的影响

  • 形成“块”（BFC）；
  • 位置尽量靠上；
  • 位置尽量靠左/右。

对兄弟元素的影响

  • 不影响其他块级元素的位置；
  • 影响其他块级元素的内部文本

对父级元素的影响

  • 从父级的布局中“消失”；
  • 造成父级元素的高度塌陷：父级元素撑开 div1 之后（父级元素里没有其他元素的情况下），如果设置 div1 为 float 之后，会让父级元素的高度变为0。

圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。 Holy Grail Layout

代码实现

全量代码如下，包括 Html 及 css 脚本。

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
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Holy Grail Float</title>
		<style type="text/css">
			body {
				min-width: 550px;
			}

			#header {
				background-color: #999999;
			}
			
			#middle{
				/* 2.把中间部分留出左右元素的宽度 */
				padding-left: 200px;
				padding-right: 150px;
			}
			
			#middle .column{
				float: left;
				height: 200px;
			}
			
			#left{
				width: 200px;
				background-color: #FFFF00;
				/* 4. 向左移动center的宽度 */
				margin-left: -100%;
				/* 5. 再向左移动自身宽度，露出被覆盖的center块 */
				position: relative;
				right: 200px;
			}
			
			#center{
				width: 100%;
				background-color: pink;
			}
			
			#right{
				/* 3.margin-right让右方元素覆盖自身，达到消除自身宽度的目的，浮动到center上面去 */
				margin-right: -150px;
				width: 150px;
				background-color: #CCCCCC;
			}
			
			#footer {
				background-color: #999999;
			}
			
			.clearfix:after{
				display: table;
				content: '';
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="middle" class="clearfix">
			<div id="center" class="column">
				center
			</div>
			<div id="left" class="column">
				left
			</div>
			<div id="right" class="column">
				right
			</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>


页面架构

  1. 整体分为三个部分，分别是 header, middle 和 footer. 其中 middle 又分为三个部分，分别是 center, left 和 right 边栏；
  2. middle 中的 center 部分是页面的核心区，为了 SEO 优化，将其放在最前面，而不是中间；
  3. 使用 float 将 center, left 和 right 三部分浮动起来，同时借助 margin-left 和 margin-right 将 left 和 right 移到到 center 两旁；
  4. position: relative 的作用是将 left 移动到视图的最左边，给 center 腾出位置。

最终的效果如下所示： Holy Grail Float

设计思路

初始页面

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
body {
	min-width: 550px;
}

#header {
	background-color: #999999;
}

#middle{

}

#middle .column{
	float: left;
	height: 200px;
}

#left{
	width: 200px;
	background-color: #FFFF00;
}

#center{
	width: 100%;
	background-color: pink;
}

#right{
	width: 150px;
	background-color: #CCCCCC;
}

#footer {
	background-color: #999999;
}

.clearfix:after{
	display: table;
	content: '';
	clear: both;
}

让 center, left 和 right 浮动起来，center 由于宽度占据了 middle 的所有空间，所以 center 占满了一行，将 left 和 right 挤到下一行，如下图所示： Holy Grail Float

调整两侧空间

1
2
3
4
5
#middle{
	/* 把中间部分留出左右元素的宽度 */
	padding-left: 200px;
	padding-right: 150px;
}

调整 middle 两侧空间，为 left 和 right 留出空间。如下图所示： Holy Grail Float

left 向左移动 center 的宽度，来移动到 center 所在的行

1
2
3
4
5
6
7
#left{
	width: 200px;
	background-color: #FFFF00;
	
	/* 向左移动center的宽度 */
	margin-left: -100%;
}

虽然不在同一行，float 的元素之间是紧紧挨着的，等同于在同一行。margin-left: -100%; 表示向左移动 center 的宽度，效果如下图所示： Holy Grail Float

left 再向左移动自身宽度，露出被覆盖的 center

1
2
3
4
5
6
7
8
9
10
11
#left{
	width: 200px;
	background-color: #FFFF00;
	
	/* 向左移动center的宽度 */
	margin-left: -100%;
	
	/* 再向左移动自身宽度，露出被覆盖的center块 */
	position: relative;
	right: 200px;
}

对于 relative 来说，right:200px; 意味当前元素的右边，距离原本的位置右边有 200px 的距离。效果就是往左移动 200px 的距离，效果如下图所示： Holy Grail Float

right 移到 center 的右侧

1
2
3
4
5
6
#right{
	/* margin-right 让右方元素覆盖自身，达到消除自身宽度的目的，浮动到center上面去 */
	margin-right: -150px;
	width: 150px;
	background-color: #CCCCCC;
}

right 元素的定位设置只有简单的 margin-right: -2150px;，就能实现准确定位，效果如下图所示： Holy Grail Float


参考：

1. 浮动

2. CSS布局

3.【CSS】圣杯布局和双飞翼布局（包括完整代码）

4. 从圣杯布局中，我彻底了解float，margin